@decisiv/ui-components 2.0.1-alpha.154 → 2.0.1-alpha.155

package/lib/components/Tag/Action.d.ts

@@ -0,0 +1,4 @@
+declare const Action: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default Action;
+//# sourceMappingURL=Action.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Action.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,MAAM,oEAcX,CAAC;AAEF,eAAO,MAAM,eAAe,oEAO3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Tag/Action.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ActionContainer = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _designTokens = _interopRequireDefault(require("@decisiv/design-tokens"));
+
+var _constants = require("./constants");
+
+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; } }
+
+var _designTokens$color = _designTokens.default.color,
+    baseColors = _designTokens$color.base,
+    interactionColors = _designTokens$color.interaction;
+var borderRadius = (0, _styledComponents.css)(["border-radius:0 ", " ", " 0;"], (0, _rem.default)(10), (0, _rem.default)(10));
+
+var Action = _styledComponents.default.div.withConfig({
+  displayName: "Action",
+  componentId: "sc-53eucd-0"
+})(["align-items:center;appearance:none;background-color:", ";border:0;color:", ";display:flex;height:100%;justify-content:flex-start;padding:0 0 0 ", ";width:", ";outline:none;", ""], (0, _toColorString.default)(baseColors.snowWhite), (0, _toColorString.default)(interactionColors.pacificOcean), (0, _rem.default)(4), (0, _rem.default)(_constants.ACTION_WIDTH), borderRadius);
+
+var ActionContainer = _styledComponents.default.div.withConfig({
+  displayName: "Action__ActionContainer",
+  componentId: "sc-53eucd-1"
+})(["height:", ";margin-right:2px;background-color:", ";box-shadow:", " 0 0 0 ", ";", ";"], (0, _rem.default)(18), (0, _toColorString.default)(baseColors.snowWhite), (0, _rem.default)(2), (0, _toColorString.default)(baseColors.snowWhite), borderRadius);
+
+exports.ActionContainer = ActionContainer;
+var _default = Action;
+exports.default = _default;

package/lib/components/Tag/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const ACTION_BUTTON_WIDTH = 22;
+export declare const ACTION_WIDTH = 20;
 export declare const CONTAINER_X_PADDING = 14;
 export declare const ICON_CONTENT_MARGIN = 5;
 export declare const MAX_CONTAINER_WIDTH = 300;

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,mBAAmB,MAAM,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,mBAAmB,MAAM,CAAC"}

package/lib/components/Tag/constants.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MAX_CONTAINER_WIDTH = exports.ICON_CONTENT_MARGIN = exports.CONTAINER_X_PADDING = exports.ACTION_BUTTON_WIDTH = void 0;
-var ACTION_BUTTON_WIDTH = 22;
-exports.ACTION_BUTTON_WIDTH = ACTION_BUTTON_WIDTH;
+exports.MAX_CONTAINER_WIDTH = exports.ICON_CONTENT_MARGIN = exports.CONTAINER_X_PADDING = exports.ACTION_WIDTH = void 0;
+var ACTION_WIDTH = 20;
+exports.ACTION_WIDTH = ACTION_WIDTH;
 var CONTAINER_X_PADDING = 14;
 exports.CONTAINER_X_PADDING = CONTAINER_X_PADDING;
 var ICON_CONTENT_MARGIN = 5;

package/lib/components/Tag/index.d.ts

@@ -1,7 +1,7 @@
 import { RefForwardingComponent } from 'react';
 import { CommonUIColors } from '../../utils/commonUIColors';
 import { TagProps, TagRef } from './types';
-export { TagProps, TagRef, TagActionButtonRef } from './types';
+export { TagProps, TagRef, TagActionRef as TagActionButtonRef } from './types';
 export declare type ColorKeys = keyof CommonUIColors;
 declare const TagWithRef: RefForwardingComponent<TagRef, TagProps>;
 export default TagWithRef;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAIZ,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAkB,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAY5E,OAAO,EAA4B,QAAQ,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAErE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE/D,oBAAY,SAAS,GAAG,MAAM,cAAc,CAAC;AA6L7C,QAAA,MAAM,UAAU,EAAE,sBAAsB,CAAC,MAAM,EAAE,QAAQ,CAAmB,CAAC;AAS7E,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAIZ,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAQf,OAAO,EAGL,cAAc,EACf,MAAM,4BAA4B,CAAC;AAapC,OAAO,EAGL,QAAQ,EACR,MAAM,EAEP,MAAM,SAAS,CAAC;AAQjB,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE/E,oBAAY,SAAS,GAAG,MAAM,cAAc,CAAC;AAkT7C,QAAA,MAAM,UAAU,EAAE,sBAAsB,CAAC,MAAM,EAAE,QAAQ,CAAmB,CAAC;AAS7E,eAAe,UAAU,CAAC"}

package/lib/components/Tag/index.js

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "TagRef", {
 Object.defineProperty(exports, "TagActionButtonRef", {
   enumerable: true,
   get: function get() {
-    return _types.TagActionButtonRef;
+    return _types.TagActionRef;
   }
 });
 exports.default = void 0;
@@ -31,15 +31,17 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _designTokens = require("@decisiv/design-tokens");
+var _designTokens = _interopRequireWildcard(require("@decisiv/design-tokens"));
 
 var _color = _interopRequireDefault(require("../../modifiers/color"));
 
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
 var _commonUIColors = require("../../utils/commonUIColors");
 
 var _Typography = require("../Typography");
 
-var _ActionButton = _interopRequireWildcard(require("./ActionButton"));
+var _Action = _interopRequireWildcard(require("./Action"));
 
 var _constants = require("./constants");
 
@@ -47,6 +49,10 @@ var _propTypes = require("./propTypes");
 
 var _types = require("./types");
 
+var _BaseButton = _interopRequireDefault(require("../../atoms/BaseButton"));
+
+var _styleModifiers = require("../../utils/styleModifiers");
+
 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 }; }
@@ -71,7 +77,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 borderColor = (0, _toColorString.default)(_designTokens.color.opacity.charcoal15);
+var _designTokens$color = _designTokens.default.color,
+    interactionColors = _designTokens$color.interaction,
+    statusColors = _designTokens$color.status;
 
 var getContentMaxWidth = function getContentMaxWidth(props) {
   var isSingleChild = props.isSingleChild,
@@ -81,27 +89,43 @@ var getContentMaxWidth = function getContentMaxWidth(props) {
   var containerBorder = 2;
   var baseWidth = _constants.MAX_CONTAINER_WIDTH - _constants.CONTAINER_X_PADDING - containerBorder;
   var valuesToSubtract = [];
-  !isSingleChild && valuesToSubtract.push(_constants.ACTION_BUTTON_WIDTH, actionBorder);
+  !isSingleChild && valuesToSubtract.push(_constants.ACTION_WIDTH, actionBorder);
   hasIcon && valuesToSubtract.push(iconWidth, _constants.ICON_CONTENT_MARGIN);
   return (0, _rem.default)(valuesToSubtract.reduce(function (r, v) {
     return r - v;
   }, baseWidth));
 };
 
-var colorModifiers = function colorModifiers(_ref) {
-  var variant = _ref.variant,
-      colorProp = _ref.color;
-  return variant === 'outline' ? (0, _color.default)(_objectSpread({}, _designTokens.color.base.snowWhite, {
-    fg: _designTokens.color.base.alaskanHusky
-  })) : (0, _color.default)(colorProp && colorProp in _commonUIColors.commonUIColors ? _commonUIColors.commonUIColors[colorProp] : _commonUIColors.commonUIColors.licoriceMousse);
+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 Content = _styledComponents.default.div.withConfig({
   displayName: "Tag__Content",
   componentId: "nifm8a-0"
-})(["align-items:center;border:0;display:flex;padding:0 ", ";", ";> svg{flex:1 0 auto;}* + *{margin-left:", ";}span{max-width:", ";}"], (0, _rem.default)(_constants.CONTAINER_X_PADDING / 2), function (_ref2) {
+})(["color:inherit;align-items:center;border:0;display:flex;padding:0 ", ";border-right:1px solid ", ";", ";> svg{flex:1 0 auto;}* + *{margin-left:", ";}span{max-width:", ";}"], (0, _rem.default)(_constants.CONTAINER_X_PADDING / 2), function (_ref) {
+  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]
+  }));
+}, function (_ref2) {
   var isSingleChild = _ref2.isSingleChild;
-  return (0, _styledComponents.css)(["max-width:", ";"], isSingleChild ? '100%' : "calc(100% - ".concat(_constants.ACTION_BUTTON_WIDTH, "px)"));
+  return (0, _styledComponents.css)(["max-width:", ";border-width:", ";"], isSingleChild ? '100%' : "calc(100% - ".concat(_constants.ACTION_WIDTH, "px)"), isSingleChild ? '0' : '1px');
 }, (0, _rem.default)(_constants.ICON_CONTENT_MARGIN), getContentMaxWidth);
 
 var contentSVGColor = function contentSVGColor(_ref3) {
@@ -115,10 +139,61 @@ var contentSVGColor = function contentSVGColor(_ref3) {
   return null;
 };
 
-var Container = _styledComponents.default.div.withConfig({
+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 colorModifiers = function colorModifiers(props) {
+  var _props$palette = props.palette,
+      palette = _props$palette === void 0 ? 'bright' : _props$palette;
+
+  var borderColor = _objectSpread({}, _designTokens.color.base.charcoal, {
+    alpha: 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)));
+};
+
+var variantModifiers = function variantModifiers(props) {
+  var _props$variant = props.variant,
+      variant = _props$variant === void 0 ? 'normal' : _props$variant;
+  if (variant === 'normal') return undefined;
+  return (0, _styledComponents.css)(["border:1px solid ", ";", " &:focus{border:1px solid ", ";", ";}"], (0, _toColorString.default)(_designTokens.color.opacity.charcoal15), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{box-shadow:none;background-color:", ";}"], (0, _toColorString.default)(_objectSpread({}, _designTokens.color.base.charcoal, {
+    alpha: 0.07
+  })))), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40));
+};
+
+var actionColors = {
+  normal: (0, _toColorString.default)(interactionColors.indianOcean),
+  danger: (0, _toColorString.default)(statusColors.danger.medium)
+};
+
+var actionColor = function actionColor(_ref5) {
+  var actionIntent = _ref5.actionIntent;
+  return actionColors[actionIntent !== 'danger' ? 'normal' : 'danger'];
+};
+
+var Container = (0, _styledComponents.default)(_BaseButton.default).withConfig({
   displayName: "Tag__Container",
   componentId: "nifm8a-1"
-})(["font-family:", ";font-size:", ";font-weight:", ";align-items:center;border-radius:", ";border:1px solid ", ";display:inline-flex;height:", ";max-width:100%;min-width:", ";padding:0;", ";", ";", "{", ";}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default, (0, _rem.default)(10), borderColor, (0, _rem.default)(20), (0, _rem.default)(26), colorModifiers, contentSVGColor, _ActionButton.ActionButtonContainer, colorModifiers);
+})(["font-family:", ";font-size:", ";font-weight:", ";align-items:center;border-radius:", ";display:inline-flex;height:", ";max-width:100%;min-width:", ";padding:0;background-color:transparent;&:focus{border:1px solid ", ";", ";", "{height:", ";box-shadow:none;}}&:focus-visible{outline:none;}&:hover{", "{color:", ";}}", ";", ";", ";"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default, (0, _rem.default)(10), (0, _rem.default)(20), (0, _rem.default)(26), (0, _toColorString.default)(_designTokens.color.base.blackSheep), (0, _focusRingWithColor.default)(_designTokens.color.opacity.charcoal40), _Action.ActionContainer, (0, _rem.default)(14), _Action.default, actionColor, colorModifiers, variantModifiers, contentSVGColor);
 
 function Tag(props, containerRef) {
   var action = props.action,
@@ -128,50 +203,44 @@ function Tag(props, containerRef) {
       actionRef = props.actionRef,
       Icon = props.icon,
       text = props.text,
-      rest = _objectWithoutProperties(props, ["action", "actionAttributes", "actionIcon", "actionIntent", "actionRef", "icon", "text"]);
+      palette = props.palette,
+      rest = _objectWithoutProperties(props, ["action", "actionAttributes", "actionIcon", "actionIntent", "actionRef", "icon", "text", "palette"]);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       isFocused = _useState2[0],
       setIsFocused = _useState2[1];
 
-  var onActionFocus = (0, _react.useCallback)(function (e) {
-    var _ref4 = actionAttributes || {
+  var onTagFocus = (0, _react.useCallback)(function (e) {
+    var _ref6 = actionAttributes || {
       onFocus: undefined
     },
-        onFocus = _ref4.onFocus;
+        onFocus = _ref6.onFocus;
 
     setIsFocused(true);
     onFocus && onFocus(e);
   }, [actionAttributes]);
-  var onActionBlur = (0, _react.useCallback)(function (e) {
-    var _ref5 = actionAttributes || {
+  var onTagBlur = (0, _react.useCallback)(function (e) {
+    var _ref7 = actionAttributes || {
       onBlur: undefined
     },
-        onBlur = _ref5.onBlur;
+        onBlur = _ref7.onBlur;
 
     setIsFocused(false);
     onBlur && onBlur(e);
   }, [actionAttributes]);
-  var Action = (0, _react.useMemo)(function () {
+  var ActionElement = (0, _react.useMemo)(function () {
     if (!text || !action || !actionIcon) {
       return null;
     }
 
     var ActionIcon = actionIcon;
-    return _react.default.createElement(_ActionButton.ActionButtonContainer, {
-      isFocused: isFocused
-    }, _react.default.createElement(_ActionButton.default, _extends({}, actionAttributes, {
-      ref: actionRef,
-      type: "button",
-      onBlur: onActionBlur,
-      onClick: action,
-      onFocus: onActionFocus,
-      actionIntent: actionIntent
-    }), _react.default.createElement(ActionIcon, {
+    return _react.default.createElement(_Action.ActionContainer, null, _react.default.createElement(_Action.default, {
+      ref: actionRef
+    }, _react.default.createElement(ActionIcon, {
       size: "small"
     })));
-  }, [text, action, actionRef, isFocused, actionIcon, actionIntent, onActionBlur, onActionFocus, actionAttributes]);
+  }, [text, action, actionRef, actionIcon]);
   var contentIsSingleChild = !action || !!action && !text;
   /**
    * We render the "content" twice below. The first one is visible to the user
@@ -182,9 +251,17 @@ function Tag(props, containerRef) {
    * seconds content component, and calculate the max width of the container.
    */
 
-  return _react.default.createElement(Container, _extends({}, rest, {
-    ref: containerRef
+  return _react.default.createElement(Container, _extends({}, rest, actionAttributes, {
+    isSingleChild: contentIsSingleChild,
+    palette: palette,
+    ref: containerRef,
+    onBlur: onTagBlur,
+    onClick: action,
+    onFocus: onTagFocus,
+    isFocused: isFocused,
+    actionIntent: actionIntent
   }), _react.default.createElement(Content, {
+    palette: palette,
     hasIcon: !!Icon,
     isSingleChild: contentIsSingleChild
   }, Icon && _react.default.createElement(Icon, {
@@ -194,7 +271,7 @@ function Tag(props, containerRef) {
     color: "inherit",
     size: "small",
     truncate: true
-  }, text)), Action);
+  }, text)), ActionElement);
 }
 
 var TagWithRef = (0, _react.forwardRef)(Tag); // @ts-ignore

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

@@ -83,12 +83,193 @@ describe('Tag', function () {
   describe('Outline variant', function () {
     TestVariant('outline');
   });
+  describe('Palette variants', function () {
+    describe('bright', function () {
+      it('renders correctly', function () {
+        var _render = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "bright"
+        })),
+            container = _render.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with an Icon', function () {
+        var _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "bright",
+          icon: _Home.default
+        })),
+            container = _render2.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with different colors', function () {
+        var _render3 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "bright",
+          color: "information"
+        })),
+            container = _render3.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with an action', function () {
+        var _render4 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "bright",
+          action: jest.fn(),
+          actionAttributes: {
+            'aria-label': 'test'
+          },
+          actionIcon: _Home.default
+        })),
+            container = _render4.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders the action correctly with the danger intent', function () {
+        var _render5 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "bright",
+          action: jest.fn(),
+          actionAttributes: {
+            'aria-label': 'test'
+          },
+          actionIcon: _Home.default,
+          actionIntent: "danger"
+        })),
+            container = _render5.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+    describe('pastel', function () {
+      it('renders correctly', function () {
+        var _render6 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "pastel"
+        })),
+            container = _render6.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with an Icon', function () {
+        var _render7 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "pastel",
+          icon: _Home.default
+        })),
+            container = _render7.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with different colors', function () {
+        var _render8 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "pastel",
+          color: "information"
+        })),
+            container = _render8.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with an action', function () {
+        var _render9 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "pastel",
+          action: jest.fn(),
+          actionAttributes: {
+            'aria-label': 'test'
+          },
+          actionIcon: _Home.default
+        })),
+            container = _render9.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders the action correctly with the danger intent', function () {
+        var _render10 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "pastel",
+          action: jest.fn(),
+          actionAttributes: {
+            'aria-label': 'test'
+          },
+          actionIcon: _Home.default,
+          actionIntent: "danger"
+        })),
+            container = _render10.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+    describe('dark', function () {
+      it('renders correctly', function () {
+        var _render11 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "dark"
+        })),
+            container = _render11.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with an Icon', function () {
+        var _render12 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "dark",
+          icon: _Home.default
+        })),
+            container = _render12.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with different colors', function () {
+        var _render13 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "dark",
+          color: "information"
+        })),
+            container = _render13.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders correctly with an action', function () {
+        var _render14 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "dark",
+          action: jest.fn(),
+          actionAttributes: {
+            'aria-label': 'test'
+          },
+          actionIcon: _Home.default
+        })),
+            container = _render14.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('renders the action correctly with the danger intent', function () {
+        var _render15 = (0, _react2.render)(_react.default.createElement(_.default, {
+          text: "text",
+          palette: "dark",
+          action: jest.fn(),
+          actionAttributes: {
+            'aria-label': 'test'
+          },
+          actionIcon: _Home.default,
+          actionIntent: "danger"
+        })),
+            container = _render15.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+  });
   describe('Common', function () {
     it('does not render a provided action if there is not text', function () {
       jest.spyOn(console, 'error').mockImplementation(function () {});
 
       var _renderTag6 = renderTag({
-        icon: _Home.default,
         text: undefined,
         action: function action() {
           return null;
@@ -100,7 +281,7 @@ describe('Tag', function () {
       }, 'normal'),
           container = _renderTag6.container;
 
-      expect(container.querySelectorAll('button').length).toBe(0);
+      expect(container.querySelectorAll('svg').length).toBe(0);
       expect(console.error).toHaveBeenCalled(); // @ts-ignore
 
       console.error.mockRestore();

package/lib/components/Tag/propTypes.d.ts

@@ -9,6 +9,7 @@ export declare const propTypes: {
     actionRef: PropTypes.Requireable<any>;
     color: PropTypes.Requireable<import("../../utils/commonUIColors").CommonUIColorKeys>;
     variant: PropTypes.Requireable<string>;
+    palette: PropTypes.Requireable<string>;
 };
 export declare const defaultProps: {
     action: undefined;
@@ -20,5 +21,6 @@ export declare const defaultProps: {
     icon: undefined;
     text: undefined;
     variant: string;
+    palette: string;
 };
 //# sourceMappingURL=propTypes.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"propTypes.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/propTypes.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAYnC,eAAO,MAAM,SAAS;;;;;;;;;;CA0BrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;CAUxB,CAAC"}
+{"version":3,"file":"propTypes.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/propTypes.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAYnC,eAAO,MAAM,SAAS;;;;;;;;;;;CA2BrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;CAWxB,CAAC"}

package/lib/components/Tag/propTypes.js

@@ -40,7 +40,8 @@ var propTypes = {
   actionIntent: _propTypes.default.oneOf(['normal', 'danger']),
   actionRef: _propTypes.default.any,
   color: _propTypes.default.oneOf(_commonUIColors.commonUIColorKeys),
-  variant: _propTypes.default.oneOf(['normal', 'outline'])
+  variant: _propTypes.default.oneOf(['normal', 'outline']),
+  palette: _propTypes.default.oneOf(['pastel', 'bright', 'dark'])
 };
 exports.propTypes = propTypes;
 var defaultProps = {
@@ -52,6 +53,7 @@ var defaultProps = {
   color: undefined,
   icon: undefined,
   text: undefined,
-  variant: 'normal'
+  variant: 'normal',
+  palette: 'bright'
 };
 exports.defaultProps = defaultProps;

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAmC,CAAC;AA2ChD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAmC,CAAC;AA8ChD,eAAe,MAAM,CAAC"}

package/lib/components/Tag/schema.js

@@ -17,6 +17,7 @@ schema.propTypes = {
   text: _reactDesc.PropTypes.string.description("The tag's text"),
   icon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render as the main icon'),
   color: _reactDesc.PropTypes.oneOf(_commonUIColors.commonUIColorKeys).description('The color to use as the tag background or SVG color when outlined').format('string (see notes below)').defaultValue('licoriceMousse'),
+  palette: _reactDesc.PropTypes.oneOf(['bright', 'pastel', 'dark']).description('What color variant to render').defaultValue('bright'),
   variant: _reactDesc.PropTypes.oneOf(['normal', 'outline']).description('What tag variant to render').defaultValue('normal'),
   action: _reactDesc.PropTypes.func.description('A function to callback when the action button is clicked'),
   actionRef: _reactDesc.PropTypes.any.description('Provide a "React Ref" to get a reference to the action\'s DOM node'),

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

@@ -1,13 +1,14 @@
-import React, { Ref, RefAttributes, ButtonHTMLAttributes } from 'react';
+import React, { Ref, RefAttributes, AriaAttributes, DOMAttributes } from 'react';
 import { CSSObject } from 'styled-components';
 import { IconProps } from '@decisiv/iconix';
 import { CommonUIColorKeys } from '../../utils/commonUIColors';
-export declare type TagRef = HTMLDivElement;
-export declare type TagActionButtonRef = HTMLButtonElement;
+export declare type TagRef = HTMLButtonElement;
+export declare type TagActionRef = HTMLDivElement;
 export declare type IconComponent = (props: IconProps) => JSX.Element;
 export declare type ActionHandler = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => unknown;
 export declare type BaseProps = {
     color?: CommonUIColorKeys;
+    palette?: 'pastel' | 'bright' | 'dark';
     variant?: 'normal' | 'outline';
     style?: CSSObject;
 };
@@ -34,14 +35,11 @@ declare type ConditionalProps = Text & {
 } | Icon & {
     action?: never;
 } | Text & Icon | Text & Action & ActionIcon | Text & Icon & Action & ActionIcon;
-export declare type ActionButtonContainerProps = {
-    isFocused: boolean;
-};
-export declare type ActionButtonExtraProps = {
-    actionRef?: Ref<TagActionButtonRef>;
+export declare type ActionExtraProps = {
+    actionRef?: Ref<TagActionRef>;
     actionIntent?: 'normal' | 'danger';
-    actionAttributes?: ButtonHTMLAttributes<HTMLButtonElement>;
+    actionAttributes?: AriaAttributes & DOMAttributes<HTMLButtonElement>;
 };
-export declare type TagProps = RefAttributes<TagRef> & BaseProps & ContentProps & ConditionalProps & ActionButtonExtraProps;
+export declare type TagProps = RefAttributes<TagRef> & BaseProps & ContentProps & ConditionalProps & ActionExtraProps;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,MAAM,GAAG,cAAc,CAAC;AACpC,oBAAY,kBAAkB,GAAG,iBAAiB,CAAC;AACnD,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,oBAAY,aAAa,GAAG,CAC1B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KACnD,OAAO,CAAC;AAEb,oBAAY,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7B,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AACpC,aAAK,MAAM,GAAG;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,CAAC;AACxC,aAAK,UAAU,GAAG;IAAE,UAAU,EAAE,aAAa,CAAA;CAAE,CAAC;AAEhD,aAAK,gBAAgB,GACjB,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE,GACjC,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GACzB,IAAI,GAAG,IAAI,GACX,IAAI,GAAG,MAAM,GAAG,UAAU,GAC1B,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtC,oBAAY,0BAA0B,GAAG;IACvC,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACnC,gBAAgB,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;CAC5D,CAAC;AAEF,oBAAY,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,GAC1C,SAAS,GACT,YAAY,GACZ,gBAAgB,GAChB,sBAAsB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,GAAG,EACH,aAAa,EACb,cAAc,EACd,aAAa,EACd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,MAAM,GAAG,iBAAiB,CAAC;AACvC,oBAAY,YAAY,GAAG,cAAc,CAAC;AAC1C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,oBAAY,aAAa,GAAG,CAC1B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KACnD,OAAO,CAAC;AAEb,oBAAY,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7B,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AACpC,aAAK,MAAM,GAAG;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,CAAC;AACxC,aAAK,UAAU,GAAG;IAAE,UAAU,EAAE,aAAa,CAAA;CAAE,CAAC;AAEhD,aAAK,gBAAgB,GACjB,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE,GACjC,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GACzB,IAAI,GAAG,IAAI,GACX,IAAI,GAAG,MAAM,GAAG,UAAU,GAC1B,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtC,oBAAY,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACnC,gBAAgB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACtE,CAAC;AAEF,oBAAY,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,GAC1C,SAAS,GACT,YAAY,GACZ,gBAAgB,GAChB,gBAAgB,CAAC"}

package/lib/utils/commonUIColors.d.ts

@@ -11,11 +11,359 @@ export declare type CommonUIColorKeys = StatusColorsKeys | VIColorsKeys;
 export declare type CommonUIColors = {
     [K in CommonUIColorKeys]: Color;
 };
-export declare const viColorKeys: import("@decisiv/design-tokens/lib/color/visual-interest").VisualInterestColorName[];
+export declare const viColorKeys: ("berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse")[];
 export declare const statusColorKeys: ("information" | "success" | "warning" | "danger")[];
 export declare const viColors: VIColors;
 export declare const statusColors: StatusColors;
 export declare const commonUIColorKeys: CommonUIColorKeys[];
 export declare const commonUIColors: CommonUIColors;
+export declare const commonUIThreeShadeColors: {
+    readonly berryCrisp: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly koolaidCake: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly cookieMonster: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly cottonCandy: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly fizzyLime: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly mamboMango: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly carrotCake: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly roseGummy: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly licoriceMousse: {
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly information: import("@decisiv/design-tokens/lib/color").ThreeShadeColor;
+    readonly success: import("@decisiv/design-tokens/lib/color").ThreeShadeColor;
+    readonly warning: import("@decisiv/design-tokens/lib/color").ThreeShadeColor;
+    readonly danger: import("@decisiv/design-tokens/lib/color").ThreeShadeColor;
+};
 export {};
 //# sourceMappingURL=commonUIColors.d.ts.map

package/lib/utils/commonUIColors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commonUIColors.d.ts","sourceRoot":"","sources":["../../src/utils/commonUIColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAIhE,oBAAY,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC,cAAc,CAAC;AAC7D,oBAAY,gBAAgB,GAAG,MAAM,OAAO,KAAK,CAAC,MAAM,CAAC;AAEzD,aAAK,QAAQ,GAAG;KAAG,CAAC,IAAI,YAAY,GAAG,KAAK;CAAE,CAAC;AAC/C,aAAK,YAAY,GAAG;KAAG,CAAC,IAAI,gBAAgB,GAAG,KAAK;CAAE,CAAC;AAEvD,oBAAY,iBAAiB,GAAG,gBAAgB,GAAG,YAAY,CAAC;AAChE,oBAAY,cAAc,GAAG;KAAG,CAAC,IAAI,iBAAiB,GAAG,KAAK;CAAE,CAAC;AAEjE,eAAO,MAAM,WAAW,sFAAgD,CAAC;AACzE,eAAO,MAAM,eAAe,sDAA4C,CAAC;AAEzE,eAAO,MAAM,QAAQ,UAMR,CAAC;AAEd,eAAO,MAAM,YAAY,cAGR,CAAC;AAElB,eAAO,MAAM,iBAAiB,qBAAuC,CAAC;AAEtE,eAAO,MAAM,cAAc,EAAE,cAG5B,CAAC"}
+{"version":3,"file":"commonUIColors.d.ts","sourceRoot":"","sources":["../../src/utils/commonUIColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAIhE,oBAAY,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC,cAAc,CAAC;AAC7D,oBAAY,gBAAgB,GAAG,MAAM,OAAO,KAAK,CAAC,MAAM,CAAC;AAEzD,aAAK,QAAQ,GAAG;KAAG,CAAC,IAAI,YAAY,GAAG,KAAK;CAAE,CAAC;AAC/C,aAAK,YAAY,GAAG;KAAG,CAAC,IAAI,gBAAgB,GAAG,KAAK;CAAE,CAAC;AAEvD,oBAAY,iBAAiB,GAAG,gBAAgB,GAAG,YAAY,CAAC;AAChE,oBAAY,cAAc,GAAG;KAAG,CAAC,IAAI,iBAAiB,GAAG,KAAK;CAAE,CAAC;AAEjE,eAAO,MAAM,WAAW,iJAAgD,CAAC;AACzE,eAAO,MAAM,eAAe,sDAA4C,CAAC;AAEzE,eAAO,MAAM,QAAQ,UAMR,CAAC;AAEd,eAAO,MAAM,YAAY,cAGR,CAAC;AAElB,eAAO,MAAM,iBAAiB,qBAAuC,CAAC;AAEtE,eAAO,MAAM,cAAc,EAAE,cAG5B,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAG3B,CAAC"}

package/lib/utils/commonUIColors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.commonUIColors = exports.commonUIColorKeys = exports.statusColors = exports.viColors = exports.statusColorKeys = exports.viColorKeys = void 0;
+exports.commonUIThreeShadeColors = exports.commonUIColors = exports.commonUIColorKeys = exports.statusColors = exports.viColors = exports.statusColorKeys = exports.viColorKeys = void 0;
 
 var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
 
@@ -42,4 +42,8 @@ exports.commonUIColorKeys = commonUIColorKeys;
 
 var commonUIColors = _objectSpread({}, statusColors, {}, viColors);
 
-exports.commonUIColors = commonUIColors;
+exports.commonUIColors = commonUIColors;
+
+var commonUIThreeShadeColors = _objectSpread({}, status, {}, visualInterest);
+
+exports.commonUIThreeShadeColors = commonUIThreeShadeColors;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.154+a36b70f",
+  "version": "2.0.1-alpha.155+2a55911",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@decisiv/breakpoint-observer": "^1.8.8",
-    "@decisiv/design-tokens": "^1.8.8",
-    "@decisiv/iconix": "^2.0.0",
+    "@decisiv/design-tokens": "^1.8.9-alpha.273+2a55911",
+    "@decisiv/iconix": "^2.0.1-alpha.155+2a55911",
     "@decisiv/prop-types": "^1.6.9",
     "@seznam/compose-react-refs": "^1.0.2",
     "csstype": "^2.6.5",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "a36b70fc214170234472e5d06f14a8824d21317c"
+  "gitHead": "2a55911af990f81d5504d2f61475dc8968227879"
 }

package/lib/components/Tag/ActionButton.d.ts

@@ -1,5 +0,0 @@
-import { ActionButtonContainerProps, ActionButtonExtraProps } from './types';
-declare const ActionButton: import("styled-components").StyledComponent<"button", any, ActionButtonExtraProps, never>;
-export declare const ActionButtonContainer: import("styled-components").StyledComponent<"div", any, ActionButtonContainerProps, never>;
-export default ActionButton;
-//# sourceMappingURL=ActionButton.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/ActionButton.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,0BAA0B,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAwB7E,QAAA,MAAM,YAAY,2FAkBjB,CAAC;AAEF,eAAO,MAAM,qBAAqB,4FAiBjC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Tag/ActionButton.js

@@ -1,56 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ActionButtonContainer = void 0;
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
-
-var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
-
-var _designTokens = _interopRequireDefault(require("@decisiv/design-tokens"));
-
-var _BaseButton = _interopRequireDefault(require("../../atoms/BaseButton"));
-
-var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
-
-var _styleModifiers = require("../../utils/styleModifiers");
-
-var _constants = require("./constants");
-
-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; } }
-
-var _designTokens$color = _designTokens.default.color,
-    baseColors = _designTokens$color.base,
-    interactionColors = _designTokens$color.interaction,
-    statusColors = _designTokens$color.status,
-    opacityColors = _designTokens$color.opacity;
-var actionButtonColors = {
-  normal: (0, _toColorString.default)(interactionColors.indianOcean),
-  danger: (0, _toColorString.default)(statusColors.danger.medium)
-};
-var borderRadius = (0, _styledComponents.css)(["border-radius:0 ", " ", " 0;"], (0, _rem.default)(10), (0, _rem.default)(10));
-
-var actionButtonColor = function actionButtonColor(_ref) {
-  var actionIntent = _ref.actionIntent;
-  return actionButtonColors[actionIntent !== 'danger' ? 'normal' : 'danger'];
-};
-
-var ActionButton = (0, _styledComponents.default)(_BaseButton.default).withConfig({
-  displayName: "ActionButton",
-  componentId: "jxjmgf-0"
-})(["align-items:center;appearance:none;background-color:", ";border:0;color:", ";display:flex;height:", ";justify-content:flex-start;padding:0 0 0 ", ";width:", ";outline:none;", " &:hover:not(:active){color:", ";}"], (0, _toColorString.default)(baseColors.snowWhite), (0, _toColorString.default)(interactionColors.pacificOcean), (0, _rem.default)(18), (0, _rem.default)(4), (0, _rem.default)(_constants.ACTION_BUTTON_WIDTH), borderRadius, actionButtonColor);
-
-var ActionButtonContainer = _styledComponents.default.div.withConfig({
-  displayName: "ActionButton__ActionButtonContainer",
-  componentId: "jxjmgf-1"
-})(["border:1px solid ", ";margin-right:-1px;", ";", ";"], (0, _toColorString.default)(opacityColors.charcoal15), borderRadius, (0, _styleModifiers.when)('isFocused', (0, _styledComponents.css)(["border-color:", ";", "{", "}"], (0, _toColorString.default)(interactionColors.pacificOcean), ActionButton, (0, _focusRingWithColor.default)(interactionColors.pacificOcean40))));
-
-exports.ActionButtonContainer = ActionButtonContainer;
-var _default = ActionButton;
-exports.default = _default;