@spaced-out/ui-design-system 0.3.8 → 0.3.10

package/lib/components/Separator/Separator.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Separator = exports.ORIENTATION = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _size = require("../../styles/variables/_size");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _SeparatorModule = _interopRequireDefault(require("./Separator.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 ORIENTATION = Object.freeze({
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+});
+exports.ORIENTATION = ORIENTATION;
+const Separator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    orientation = ORIENTATION.vertical,
+    width,
+    height
+  } = _ref;
+  // Dynamically compute width and height based on orientation if not provided
+  const resolvedWidth = width || (orientation === ORIENTATION.vertical ? _size.size2 : 'auto');
+  const resolvedHeight = height || (orientation === ORIENTATION.horizontal ? _size.size2 : 'auto');
+  const style = {
+    '--separator-width': orientation === ORIENTATION.vertical ? resolvedWidth : 'auto',
+    '--separator-height': orientation === ORIENTATION.horizontal ? resolvedHeight : 'auto'
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "Separator",
+    style: style,
+    className: (0, _classify.default)(_SeparatorModule.default.wrapper, classNames?.wrapper)
+  });
+});
+exports.Separator = Separator;

package/lib/components/Separator/Separator.js.flow

@@ -0,0 +1,62 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {size2} from '../../styles/variables/_size';
+import classify from '../../utils/classify';
+
+import css from './Separator.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export const ORIENTATION = Object.freeze({
+  horizontal: 'horizontal',
+  vertical: 'vertical',
+});
+
+export type OrientationType = $Values<typeof ORIENTATION>;
+
+export type SeparatorProps = {
+  classNames?: ClassNames,
+  orientation?: OrientationType,
+  width?: string,
+  height?: string,
+};
+
+export const Separator: React$AbstractComponent<
+  SeparatorProps,
+  HTMLDivElement,
+> = React.forwardRef<SeparatorProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      orientation = ORIENTATION.vertical,
+      width,
+      height,
+    }: SeparatorProps,
+    ref,
+  ) => {
+    // Dynamically compute width and height based on orientation if not provided
+    const resolvedWidth =
+      width || (orientation === ORIENTATION.vertical ? size2 : 'auto');
+    const resolvedHeight =
+      height || (orientation === ORIENTATION.horizontal ? size2 : 'auto');
+
+    const style = {
+      '--separator-width':
+        orientation === ORIENTATION.vertical ? resolvedWidth : 'auto',
+      '--separator-height':
+        orientation === ORIENTATION.horizontal ? resolvedHeight : 'auto',
+    };
+
+    return (
+      <div
+        ref={ref}
+        data-testid="Separator"
+        style={style}
+        className={classify(css.wrapper, classNames?.wrapper)}
+      />
+    );
+  },
+);

package/lib/components/Separator/Separator.module.css

@@ -0,0 +1,10 @@
+@value (colorBorderSecondary) from '../../styles/variables/_color.css';
+@value (borderRadiusSmall) from '../../styles/variables/_border.css';
+
+.wrapper {
+  display: flex;
+  background-color: colorBorderSecondary;
+  width: var(--separator-width);
+  height: var(--separator-height);
+  border-radius: borderRadiusSmall;
+}

package/lib/components/Separator/index.js

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

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

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

package/lib/components/TextTile/TextTile.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextTile = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _TextTileModule = _interopRequireDefault(require("./TextTile.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 TextTile = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    header,
+    iconName = 'sparkles',
+    classNames,
+    description
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "TextTile",
+    className: (0, _classify.default)(_TextTileModule.default.textTileWrapper, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_TextTileModule.default.textTileTitle, classNames?.title)
+  }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+    size: _Icon.ICON_SIZE.large,
+    name: iconName,
+    type: _Icon.ICON_TYPE.solid,
+    className: _TextTileModule.default.sparkles
+  }), /*#__PURE__*/React.createElement(_Text.JumboMedium, null, header)), /*#__PURE__*/React.createElement(_Text.BodyLarge, null, description));
+});
+exports.TextTile = TextTile;

package/lib/components/TextTile/TextTile.js.flow

@@ -0,0 +1,44 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
+import {BodyLarge, JumboMedium} from '../Text';
+
+import css from './TextTile.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, title?: string}>;
+
+export type TextTileProps = {
+  header?: string,
+  iconName?: string,
+  classNames?: ClassNames,
+  description?: string,
+};
+
+export const TextTile: React$AbstractComponent<TextTileProps, HTMLDivElement> =
+  React.forwardRef<TextTileProps, HTMLDivElement>(
+    (
+      {header, iconName = 'sparkles', classNames, description}: TextTileProps,
+      ref,
+    ) => (
+      <div
+        ref={ref}
+        data-testid="TextTile"
+        className={classify(css.textTileWrapper, classNames?.wrapper)}
+      >
+        <div className={classify(css.textTileTitle, classNames?.title)}>
+          <Icon
+            size={ICON_SIZE.large}
+            name={iconName}
+            type={ICON_TYPE.solid}
+            className={css.sparkles}
+          />
+          <JumboMedium>{header}</JumboMedium>
+        </div>
+        <BodyLarge>{description}</BodyLarge>
+      </div>
+    ),
+  );

package/lib/components/TextTile/TextTile.module.css

@@ -0,0 +1,27 @@
+@value (
+  spaceSmall,
+  spaceXSmall
+) from '../../styles/variables/_space.css';
+@value (
+  colorFillPrimary,
+  colorInformation
+) from '../../styles/variables/_color.css';
+
+.textTileWrapper {
+  display: flex;
+  gap: spaceSmall;
+  flex-direction: column;
+  align-items: center;
+}
+
+.textTileTitle {
+  display: flex;
+  gap: spaceXSmall;
+  justify-content: center;
+}
+
+.sparkles {
+  background: linear-gradient(to right, colorFillPrimary, colorInformation);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

package/lib/components/TextTile/index.js

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

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

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

package/lib/components/Textarea/Textarea.js

@@ -73,7 +73,8 @@ const Textarea_ = (props, ref) => {
     value: value,
     onChange: onChange,
     onFocus: onFocus,
-    onBlur: onBlur
+    onBlur: onBlur,
+    className: classNames?.textarea
   }))), (Boolean(helperText) || error) && /*#__PURE__*/React.createElement("div", {
     className: _TextareaModule.default.info
   }, /*#__PURE__*/React.createElement(_Text.BodySmall, {

package/lib/components/Textarea/Textarea.js.flow

@@ -7,7 +7,7 @@ import {BodySmall, FormLabelSmall} from '../Text';
 import css from './Textarea.module.css';
 
 
-type ClassNames = $ReadOnly<{box?: string}>;
+type ClassNames = $ReadOnly<{box?: string, textarea?: string}>;
 
 export type TextareaProps = {
   value?: string,
@@ -112,6 +112,7 @@ const Textarea_ = (props: TextareaProps, ref): React.Node => {
           onChange={onChange}
           onFocus={onFocus}
           onBlur={onBlur}
+          className={classNames?.textarea}
         ></textarea>
       </div>
       {(Boolean(helperText) || error) && (

package/lib/components/index.js

@@ -113,6 +113,17 @@ Object.keys(_Charts).forEach(function (key) {
     }
   });
 });
+var _ChatBubble = require("./ChatBubble");
+Object.keys(_ChatBubble).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChatBubble[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChatBubble[key];
+    }
+  });
+});
 var _Checkbox = require("./Checkbox");
 Object.keys(_Checkbox).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -190,6 +201,17 @@ Object.keys(_Dialog).forEach(function (key) {
     }
   });
 });
+var _Disclaimer = require("./Disclaimer");
+Object.keys(_Disclaimer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Disclaimer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Disclaimer[key];
+    }
+  });
+});
 var _Dropdown = require("./Dropdown");
 Object.keys(_Dropdown).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -443,6 +465,28 @@ Object.keys(_ProgressDonut).forEach(function (key) {
     }
   });
 });
+var _PromptChip = require("./PromptChip");
+Object.keys(_PromptChip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PromptChip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PromptChip[key];
+    }
+  });
+});
+var _PromptInput = require("./PromptInput");
+Object.keys(_PromptInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PromptInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PromptInput[key];
+    }
+  });
+});
 var _RadioButton = require("./RadioButton");
 Object.keys(_RadioButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -454,6 +498,17 @@ Object.keys(_RadioButton).forEach(function (key) {
     }
   });
 });
+var _RadioTile = require("./RadioTile");
+Object.keys(_RadioTile).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RadioTile[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RadioTile[key];
+    }
+  });
+});
 var _RangeSlider = require("./RangeSlider");
 Object.keys(_RangeSlider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -465,6 +520,28 @@ Object.keys(_RangeSlider).forEach(function (key) {
     }
   });
 });
+var _Rating = require("./Rating");
+Object.keys(_Rating).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Rating[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Rating[key];
+    }
+  });
+});
+var _ScoreBar = require("./ScoreBar");
+Object.keys(_ScoreBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ScoreBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ScoreBar[key];
+    }
+  });
+});
 var _SearchInput = require("./SearchInput");
 Object.keys(_SearchInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -476,6 +553,17 @@ Object.keys(_SearchInput).forEach(function (key) {
     }
   });
 });
+var _Separator = require("./Separator");
+Object.keys(_Separator).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Separator[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Separator[key];
+    }
+  });
+});
 var _Shimmer = require("./Shimmer");
 Object.keys(_Shimmer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -586,6 +674,17 @@ Object.keys(_Textarea).forEach(function (key) {
     }
   });
 });
+var _TextTile = require("./TextTile");
+Object.keys(_TextTile).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TextTile[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TextTile[key];
+    }
+  });
+});
 var _Toast = require("./Toast");
 Object.keys(_Toast).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -10,6 +10,7 @@ export * from './ButtonDropdown';
 export * from './ButtonTabs';
 export * from './Card';
 export * from './Charts';
+export * from './ChatBubble';
 export * from './Checkbox';
 export * from './Chip';
 export * from './CircularLoader';
@@ -17,6 +18,7 @@ export * from './CollapsibleCard';
 export * from './ConditionalWrapper';
 export * from './DateRangePicker';
 export * from './Dialog';
+export * from './Disclaimer';
 export * from './Dropdown';
 export * from './EmptyState';
 export * from './ErrorMessage';
@@ -40,9 +42,15 @@ export * from './PageTitle';
 export * from './Pagination';
 export * from './Panel';
 export * from './ProgressDonut';
+export * from './PromptChip';
+export * from './PromptInput';
 export * from './RadioButton';
+export * from './RadioTile';
 export * from './RangeSlider';
+export * from './Rating';
+export * from './ScoreBar';
 export * from './SearchInput';
+export * from './Separator';
 export * from './Shimmer';
 export * from './SideMenuLink';
 export * from './StatusIndicator';
@@ -53,6 +61,7 @@ export * from './Table';
 export * from './Tabs';
 export * from './Text';
 export * from './Textarea';
+export * from './TextTile';
 export * from './Toast';
 export * from './Toggle';
 export * from './Tooltip';

package/lib/styles/index.css

@@ -162,17 +162,17 @@
 
 @value colorDataViz8: #F5EBB4;
 
-@value colorScoreBarLevel1: #e94970;
+@value colorScoreBarLevel1: #7e7e7e;
 
-@value colorScoreBarLevel2: #e5983d;
+@value colorScoreBarLevel2: #e94970;
 
-@value colorScoreBarLevel3: #3987f3;
+@value colorScoreBarLevel3: #e5983d;
 
-@value colorScoreBarLevel4: #56b988;
+@value colorScoreBarLevel4: #3987f3;
 
-@value colorScoreBarLevel5: #026b37;
+@value colorScoreBarLevel5: #35ab71;
 
-@value colorScoreBarInactive: #D3D2E0;
+@value colorScoreBarInactive: #d1d1d1;
 
 @value colorGrayLightest: #EBEBEB;
 

package/lib/styles/index.js

@@ -171,17 +171,17 @@ const colorDataViz7 = '#F5B8E1';
 exports.colorDataViz7 = colorDataViz7;
 const colorDataViz8 = '#F5EBB4';
 exports.colorDataViz8 = colorDataViz8;
-const colorScoreBarLevel1 = '#e94970';
+const colorScoreBarLevel1 = '#7e7e7e';
 exports.colorScoreBarLevel1 = colorScoreBarLevel1;
-const colorScoreBarLevel2 = '#e5983d';
+const colorScoreBarLevel2 = '#e94970';
 exports.colorScoreBarLevel2 = colorScoreBarLevel2;
-const colorScoreBarLevel3 = '#3987f3';
+const colorScoreBarLevel3 = '#e5983d';
 exports.colorScoreBarLevel3 = colorScoreBarLevel3;
-const colorScoreBarLevel4 = '#56b988';
+const colorScoreBarLevel4 = '#3987f3';
 exports.colorScoreBarLevel4 = colorScoreBarLevel4;
-const colorScoreBarLevel5 = '#026b37';
+const colorScoreBarLevel5 = '#35ab71';
 exports.colorScoreBarLevel5 = colorScoreBarLevel5;
-const colorScoreBarInactive = '#D3D2E0';
+const colorScoreBarInactive = '#d1d1d1';
 exports.colorScoreBarInactive = colorScoreBarInactive;
 const colorGrayLightest = '#EBEBEB';
 exports.colorGrayLightest = colorGrayLightest;

package/lib/styles/index.js.flow

@@ -164,17 +164,17 @@ export const colorDataViz7 = '#F5B8E1';
 
 export const colorDataViz8 = '#F5EBB4';
 
-export const colorScoreBarLevel1 = '#e94970';
+export const colorScoreBarLevel1 = '#7e7e7e';
 
-export const colorScoreBarLevel2 = '#e5983d';
+export const colorScoreBarLevel2 = '#e94970';
 
-export const colorScoreBarLevel3 = '#3987f3';
+export const colorScoreBarLevel3 = '#e5983d';
 
-export const colorScoreBarLevel4 = '#56b988';
+export const colorScoreBarLevel4 = '#3987f3';
 
-export const colorScoreBarLevel5 = '#026b37';
+export const colorScoreBarLevel5 = '#35ab71';
 
-export const colorScoreBarInactive = '#D3D2E0';
+export const colorScoreBarInactive = '#d1d1d1';
 
 export const colorGrayLightest = '#EBEBEB';
 

package/lib/styles/variables/_color.css

@@ -138,17 +138,17 @@
 
 @value colorDataViz8: #F5EBB4;
 
-@value colorScoreBarLevel1: #e94970;
+@value colorScoreBarLevel1: #7e7e7e;
 
-@value colorScoreBarLevel2: #e5983d;
+@value colorScoreBarLevel2: #e94970;
 
-@value colorScoreBarLevel3: #3987f3;
+@value colorScoreBarLevel3: #e5983d;
 
-@value colorScoreBarLevel4: #56b988;
+@value colorScoreBarLevel4: #3987f3;
 
-@value colorScoreBarLevel5: #026b37;
+@value colorScoreBarLevel5: #35ab71;
 
-@value colorScoreBarInactive: #D3D2E0;
+@value colorScoreBarInactive: #d1d1d1;
 
 @value colorGrayLightest: #EBEBEB;
 

package/lib/styles/variables/_color.js

@@ -146,17 +146,17 @@ const colorDataViz7 = '#F5B8E1';
 exports.colorDataViz7 = colorDataViz7;
 const colorDataViz8 = '#F5EBB4';
 exports.colorDataViz8 = colorDataViz8;
-const colorScoreBarLevel1 = '#e94970';
+const colorScoreBarLevel1 = '#7e7e7e';
 exports.colorScoreBarLevel1 = colorScoreBarLevel1;
-const colorScoreBarLevel2 = '#e5983d';
+const colorScoreBarLevel2 = '#e94970';
 exports.colorScoreBarLevel2 = colorScoreBarLevel2;
-const colorScoreBarLevel3 = '#3987f3';
+const colorScoreBarLevel3 = '#e5983d';
 exports.colorScoreBarLevel3 = colorScoreBarLevel3;
-const colorScoreBarLevel4 = '#56b988';
+const colorScoreBarLevel4 = '#3987f3';
 exports.colorScoreBarLevel4 = colorScoreBarLevel4;
-const colorScoreBarLevel5 = '#026b37';
+const colorScoreBarLevel5 = '#35ab71';
 exports.colorScoreBarLevel5 = colorScoreBarLevel5;
-const colorScoreBarInactive = '#D3D2E0';
+const colorScoreBarInactive = '#d1d1d1';
 exports.colorScoreBarInactive = colorScoreBarInactive;
 const colorGrayLightest = '#EBEBEB';
 exports.colorGrayLightest = colorGrayLightest;

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

@@ -140,17 +140,17 @@ export const colorDataViz7 = '#F5B8E1';
 
 export const colorDataViz8 = '#F5EBB4';
 
-export const colorScoreBarLevel1 = '#e94970';
+export const colorScoreBarLevel1 = '#7e7e7e';
 
-export const colorScoreBarLevel2 = '#e5983d';
+export const colorScoreBarLevel2 = '#e94970';
 
-export const colorScoreBarLevel3 = '#3987f3';
+export const colorScoreBarLevel3 = '#e5983d';
 
-export const colorScoreBarLevel4 = '#56b988';
+export const colorScoreBarLevel4 = '#3987f3';
 
-export const colorScoreBarLevel5 = '#026b37';
+export const colorScoreBarLevel5 = '#35ab71';
 
-export const colorScoreBarInactive = '#D3D2E0';
+export const colorScoreBarInactive = '#d1d1d1';
 
 export const colorGrayLightest = '#EBEBEB';