@spaced-out/ui-design-system 0.0.4 → 0.0.5

package/lib/components/AvatarGroup/AvatarGroup.js.flow

@@ -0,0 +1,137 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {colorBackgroundTertiary} from '../../styles/variables/_color';
+import {
+  spaceSmall,
+  spaceXSmall,
+  spaceXXSmall,
+} from '../../styles/variables/_space';
+import classify from '../../utils/classify';
+import type {AvatarSize} from '../Avatar';
+import {BaseAvatar} from '../Avatar';
+import type {PlacementType} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
+
+import css from './AvatarGroup.module.css';
+
+
+const COLOR_SEQUENCE = ['blue', 'green', 'orange', 'red', 'gray'];
+
+export type AvatarGroupProps = {
+  children?: React.Node,
+  size?: AvatarSize,
+  borderColor?: string,
+  maxTooltipLines?: number,
+  placement?: PlacementType,
+  maxAvatars?: number,
+};
+
+export const AvatarGroup = ({
+  children,
+  size = 'medium',
+  borderColor = colorBackgroundTertiary,
+  maxTooltipLines = 7,
+  placement = 'top',
+  maxAvatars = 5,
+}: AvatarGroupProps): React.Node => {
+  const childAvatarCount = React.Children.count(children);
+
+  const leftOverlap = {
+    small: spaceXXSmall,
+    medium: `${parseInt(spaceSmall) / 2}px`,
+    large: spaceXSmall,
+  };
+
+  let colorIndex = -1;
+
+  const avatarInGroup = (child, index, color) =>
+    React.cloneElement(child, {
+      size,
+      classNames: {wrapper: css.avatarInGroup},
+      style: {
+        borderColor,
+        marginLeft: `-${index !== 0 ? leftOverlap[size] : 0}`,
+      },
+      color,
+    });
+
+  const childrenArray = React.Children.toArray(children);
+  const totalAvatarCount = childrenArray.length;
+  const plusAvatar = () => {
+    const nameList = [];
+
+    for (let i = maxAvatars - 1; i < totalAvatarCount; i++) {
+      const child = childrenArray[i];
+      const {text} = child.props;
+      if (text) {
+        nameList.push(text);
+      }
+    }
+
+    const NameListNode = () => (
+      <span>
+        {nameList.map((name) => (
+          <React.Fragment key={name}>
+            {name}
+            <br />
+          </React.Fragment>
+        ))}
+      </span>
+    );
+    return (
+      <Tooltip
+        body={<NameListNode />}
+        bodyMaxLines={maxTooltipLines}
+        placement={placement}
+      >
+        <div className={css.plusAvatar}>
+          <BaseAvatar
+            size={size}
+            color="gray"
+            text={`+${childAvatarCount - maxAvatars + 1}`}
+            classNames={{wrapper: css.avatarInGroup}}
+            style={{
+              borderColor,
+              marginLeft: `-${leftOverlap[size]}`,
+            }}
+          />
+        </div>
+      </Tooltip>
+    );
+  };
+
+  const childrenWithProps = React.Children.map(children, (child, index) => {
+    const {imageSrc} = child.props;
+    if (!imageSrc) {
+      colorIndex++;
+      if (colorIndex === COLOR_SEQUENCE.length) {
+        colorIndex = 0;
+      }
+    }
+
+    const color = COLOR_SEQUENCE[colorIndex];
+    if (childAvatarCount <= maxAvatars) {
+      return avatarInGroup(child, index, color);
+    } else {
+      if (index < maxAvatars - 1) {
+        return avatarInGroup(child, index, color);
+      } else if (index === maxAvatars) {
+        return plusAvatar();
+      }
+    }
+  });
+
+  return (
+    <div
+      className={classify(css.avatarGroupContainer, {
+        [css.largeSize]: size === 'large',
+        [css.mediumSize]: size === 'medium',
+        [css.smallSize]: size === 'small',
+      })}
+    >
+      {childrenWithProps}
+    </div>
+  );
+};

package/lib/components/AvatarGroup/AvatarGroup.module.css

@@ -0,0 +1,35 @@
+@value (colorFillPrimary, colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (borderWidthTertiary) from '../../styles/variables/_border.css';
+@value ( size34, size42, size60) from '../../styles/variables/_size.css';
+
+.avatarGroupContainer {
+  display: flex;
+  flex-direction: row;
+}
+
+.avatarGroupContainer.largeSize {
+  height: size60;
+}
+
+.avatarGroupContainer.mediumSize {
+  height: size42;
+}
+
+.avatarGroupContainer.smallSize {
+  height: size34;
+}
+
+.avatarInGroup {
+  display: flex;
+  border: borderWidthTertiary solid colorBackgroundTertiary;
+}
+
+.nameList {
+  display: flex;
+  flex-direction: column;
+}
+
+.plusAvatar {
+  display: flex;
+  cursor: pointer;
+}

package/lib/components/AvatarGroup/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _AvatarGroup = require("./AvatarGroup");
+Object.keys(_AvatarGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AvatarGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AvatarGroup[key];
+    }
+  });
+});

package/lib/components/AvatarGroup/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './AvatarGroup';

package/lib/components/Badge/Badge.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Badge = exports.BADGE_COLOR = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _color = require("../../styles/variables/_color");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Text = require("../Text/Text");
+var _BadgeModule = _interopRequireDefault(require("./Badge.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const BADGE_COLOR = Object.freeze({
+  gray: _color.colorGrayLightest,
+  red: _color.colorDangerLightest,
+  orange: _color.colorWarningLightest,
+  green: _color.colorSuccessLightest,
+  blue: _color.colorInformationLightest,
+  indigo: _color.colorNeutralLightest
+});
+exports.BADGE_COLOR = BADGE_COLOR;
+const Badge = _ref => {
+  let {
+    classNames,
+    text,
+    fill = 'gray'
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "Badge",
+    className: (0, _classify.default)(_BadgeModule.default.badgeWrapper, {
+      [_BadgeModule.default.fixedWidth]: text.length <= 2
+    }, classNames?.wrapper),
+    style: {
+      backgroundColor: BADGE_COLOR[fill]
+    }
+  }, /*#__PURE__*/React.createElement(_Text.ButtonTextSmall, null, text));
+};
+exports.Badge = Badge;

package/lib/components/Badge/Badge.js.flow

@@ -0,0 +1,58 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {
+  colorDangerLightest,
+  colorGrayLightest,
+  colorInformationLightest,
+  colorNeutralLightest,
+  colorSuccessLightest,
+  colorWarningLightest,
+} from '../../styles/variables/_color';
+import classify from '../../utils/classify';
+import {ButtonTextSmall} from '../Text/Text';
+
+import css from './Badge.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export const BADGE_COLOR = Object.freeze({
+  gray: colorGrayLightest,
+  red: colorDangerLightest,
+  orange: colorWarningLightest,
+  green: colorSuccessLightest,
+  blue: colorInformationLightest,
+  indigo: colorNeutralLightest,
+});
+
+export type BadgeColorType = $Keys<typeof BADGE_COLOR>;
+
+export type BadgeProps = {
+  classNames?: ClassNames,
+  text: string,
+  fill?: BadgeColorType,
+};
+
+export const Badge = ({
+  classNames,
+  text,
+  fill = 'gray',
+}: BadgeProps): React.Node => (
+  <div
+    data-testid="Badge"
+    className={classify(
+      css.badgeWrapper,
+      {
+        [css.fixedWidth]: text.length <= 2,
+      },
+      classNames?.wrapper,
+    )}
+    style={{
+      backgroundColor: BADGE_COLOR[fill],
+    }}
+  >
+    <ButtonTextSmall>{text}</ButtonTextSmall>
+  </div>
+);

package/lib/components/Badge/Badge.module.css

@@ -0,0 +1,17 @@
+@value (size22, size100) from '../../styles/variables/_size.css';
+@value (spaceXSmall, spaceNone) from '../../styles/variables/_space.css';
+
+.badgeWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: size100;
+  height: size22;
+  padding: spaceNone spaceXSmall;
+}
+
+.fixedWidth {
+  padding: initial;
+  width: size22;
+  height: size22;
+}

package/lib/components/Badge/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function () {
+    return _Badge.Badge;
+  }
+});
+var _Badge = require("./Badge");

package/lib/components/Badge/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export type {BadgeProps} from './Badge';
+export {Badge} from './Badge';

package/lib/components/Card/Card.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PADDING_SIZES = exports.Card = void 0;
+var React = _interopRequireWildcard(require("react"));
+var SPACES = _interopRequireWildcard(require("../../styles/variables/_space"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _string = require("../../utils/string");
+var _CardModule = _interopRequireDefault(require("./Card.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const PADDING_SIZES = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
+});
+exports.PADDING_SIZES = PADDING_SIZES;
+const getPaddingValue = size => {
+  const spaceKey = 'space' + (0, _string.capitalize)(size);
+  return SPACES[spaceKey] || SPACES['spaceNone'];
+};
+const Card = _ref => {
+  let {
+    children,
+    classNames,
+    paddingTop = 'medium',
+    paddingRight = 'medium',
+    paddingBottom = 'medium',
+    paddingLeft = 'medium'
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "Card",
+    className: (0, _classify.default)(_CardModule.default.cardWrapper, classNames?.wrapper),
+    style: {
+      paddingTop: getPaddingValue(paddingTop),
+      paddingRight: getPaddingValue(paddingRight),
+      paddingBottom: getPaddingValue(paddingBottom),
+      paddingLeft: getPaddingValue(paddingLeft)
+    }
+  }, children);
+};
+exports.Card = Card;

package/lib/components/Card/Card.js.flow

@@ -0,0 +1,56 @@
+// @flow strict
+
+import * as React from 'react';
+
+import * as SPACES from '../../styles/variables/_space';
+import classify from '../../utils/classify';
+import {capitalize} from '../../utils/string';
+
+import css from './Card.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export const PADDING_SIZES = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+});
+
+export type PaddingSizeType = $Values<typeof PADDING_SIZES>;
+
+export type CardProps = {
+  classNames?: ClassNames,
+  children: React.Node,
+  paddingTop?: PaddingSizeType,
+  paddingRight?: PaddingSizeType,
+  paddingBottom?: PaddingSizeType,
+  paddingLeft?: PaddingSizeType,
+};
+
+const getPaddingValue = (size: PaddingSizeType): string => {
+  const spaceKey = 'space' + capitalize(size);
+  return SPACES[spaceKey] || SPACES['spaceNone'];
+};
+
+export const Card = ({
+  children,
+  classNames,
+  paddingTop = 'medium',
+  paddingRight = 'medium',
+  paddingBottom = 'medium',
+  paddingLeft = 'medium',
+}: CardProps): React.Node => (
+  <div
+    data-testid="Card"
+    className={classify(css.cardWrapper, classNames?.wrapper)}
+    style={{
+      paddingTop: getPaddingValue(paddingTop),
+      paddingRight: getPaddingValue(paddingRight),
+      paddingBottom: getPaddingValue(paddingBottom),
+      paddingLeft: getPaddingValue(paddingLeft),
+    }}
+  >
+    {children}
+  </div>
+);

package/lib/components/Card/Card.module.css

@@ -0,0 +1,9 @@
+@value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (borderRadiusMedium) from '../../styles/variables/_border.css';
+
+.cardWrapper {
+  display: flex;
+  composes: borderPrimary from '../../styles/border.module.css';
+  background-color: colorBackgroundTertiary;
+  border-radius: borderRadiusMedium;
+}

package/lib/components/Card/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function () {
+    return _Card.Card;
+  }
+});
+var _Card = require("./Card");

package/lib/components/Card/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export type {CardProps} from './Card';
+export {Card} from './Card';

package/lib/components/CircularLoader/CircularLoader.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CircularLoader = void 0;
 var React = _interopRequireWildcard(require("react"));
-var COLORS = _interopRequireWildcard(require("../../styles/variables/_color.js"));
+var COLORS = _interopRequireWildcard(require("../../styles/variables/_color"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _CircularLoaderModule = _interopRequireDefault(require("./CircularLoader.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/CircularLoader/CircularLoader.js.flow

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import * as COLORS from '../../styles/variables/_color.js';
+import * as COLORS from '../../styles/variables/_color';
 import classify from '../../utils/classify';
 
 import css from './CircularLoader.module.css';

package/lib/components/Tooltip/Tooltip.js

@@ -61,14 +61,14 @@ const Tooltip = _ref => {
       top: y ?? _space.spaceNone,
       left: x ?? _space.spaceNone
     }
-  }, getFloatingProps()), !!title && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
-    color: "inversePrimary"
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, {
+  }, getFloatingProps()), !!title && /*#__PURE__*/React.createElement(_Truncate.Truncate, {
     line: titleMaxLines
-  }, title)), !!body && /*#__PURE__*/React.createElement(_Text.BodyMedium, {
-    color: !title ? 'inversePrimary' : 'inverseSecondary'
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, {
+  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    color: "inversePrimary"
+  }, title)), !!body && /*#__PURE__*/React.createElement(_Truncate.Truncate, {
     line: bodyMaxLines
+  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+    color: !title ? 'inversePrimary' : 'inverseSecondary'
   }, body))));
 };
 exports.Tooltip = Tooltip;

package/lib/components/Tooltip/Tooltip.js.flow

@@ -35,19 +35,21 @@ import css from './Tooltip.module.css';
 
 type ClassNames = $ReadOnly<{tooltip?: string}>;
 
+export type PlacementType =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'right';
+
 export type TooltipProps = {
   classNames?: ClassNames,
   title?: string | React.Node,
   body?: string | React.Node,
-  placement?:
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left'
-    | 'right',
+  placement?: PlacementType,
   bodyMaxLines?: number,
   titleMaxLines?: number,
   // TODO(Nishant): Decide on a type to use
@@ -108,15 +110,21 @@ export const Tooltip = ({
           {...getFloatingProps()}
         >
           {!!title && (
-            <SubTitleExtraSmall color="inversePrimary">
-              <Truncate line={titleMaxLines}>{title}</Truncate>
-            </SubTitleExtraSmall>
+            <Truncate line={titleMaxLines}>
+              <SubTitleExtraSmall color="inversePrimary">
+                {title}
+              </SubTitleExtraSmall>
+            </Truncate>
           )}
 
           {!!body && (
-            <BodyMedium color={!title ? 'inversePrimary' : 'inverseSecondary'}>
-              <Truncate line={bodyMaxLines}>{body}</Truncate>
-            </BodyMedium>
+            <Truncate line={bodyMaxLines}>
+              <BodyMedium
+                color={!title ? 'inversePrimary' : 'inverseSecondary'}
+              >
+                {body}
+              </BodyMedium>
+            </Truncate>
           )}
         </div>
       )}

package/lib/components/Tooltip/index.js.flow

@@ -1,4 +1,4 @@
 // @flow strict
 
-export type {TooltipProps} from './Tooltip';
+export type {PlacementType, TooltipProps} from './Tooltip';
 export {Tooltip} from './Tooltip';

package/lib/styles/variables/_border.css

@@ -18,4 +18,6 @@
 
 @value borderRadiusLarge: 20px;
 
+@value borderRadiusXLarge: 30px;
+
 @value borderRadiusCircle: 50%;

package/lib/styles/variables/_border.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
+exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
 
 const borderWidthNone = '0px';
 exports.borderWidthNone = borderWidthNone;
@@ -25,5 +25,7 @@ const borderRadiusMedium = '12px';
 exports.borderRadiusMedium = borderRadiusMedium;
 const borderRadiusLarge = '20px';
 exports.borderRadiusLarge = borderRadiusLarge;
+const borderRadiusXLarge = '30px';
+exports.borderRadiusXLarge = borderRadiusXLarge;
 const borderRadiusCircle = '50%';
 exports.borderRadiusCircle = borderRadiusCircle;

package/lib/styles/variables/_border.js.flow

@@ -20,4 +20,6 @@ export const borderRadiusMedium = '12px';
 
 export const borderRadiusLarge = '20px';
 
+export const borderRadiusXLarge = '30px';
+
 export const borderRadiusCircle = '50%';

package/lib/styles/variables/_color.css

@@ -80,6 +80,8 @@
 
 @value colorButtonFillDangerPressed: #cf1945;
 
+@value colorGrayLightest: #EBEBEB;
+
 @value colorNeutral: #706f9b;
 
 @value colorNeutralLightest: #f1f1f5;

package/lib/styles/variables/_color.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSelected = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackdropFill = void 0;
+exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSelected = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackdropFill = void 0;
 
 const colorTextPrimary = '#17172A';
 exports.colorTextPrimary = colorTextPrimary;
@@ -87,6 +87,8 @@ const colorButtonFillDangerHovered = '#cf1945';
 exports.colorButtonFillDangerHovered = colorButtonFillDangerHovered;
 const colorButtonFillDangerPressed = '#cf1945';
 exports.colorButtonFillDangerPressed = colorButtonFillDangerPressed;
+const colorGrayLightest = '#EBEBEB';
+exports.colorGrayLightest = colorGrayLightest;
 const colorNeutral = '#706f9b';
 exports.colorNeutral = colorNeutral;
 const colorNeutralLightest = '#f1f1f5';

package/lib/styles/variables/_color.js.flow

@@ -82,6 +82,8 @@ export const colorButtonFillDangerHovered = '#cf1945';
 
 export const colorButtonFillDangerPressed = '#cf1945';
 
+export const colorGrayLightest = '#EBEBEB';
+
 export const colorNeutral = '#706f9b';
 
 export const colorNeutralLightest = '#f1f1f5';