Merge pull request #445 from tidepool-org/WEB-3511-color-scheme

WEB-3511 - Modify Color Scheme

Author: henry-tp

package.json

@@ -4,7 +4,7 @@
     "node": "20.8.0"
   },
   "packageManager": "[email protected]",
-  "version": "1.47.0-web-3687-new-dosing-decision-extended-duration-props.2",
+  "version": "1.48.0-web-3511-color-scheme.9",
   "description": "Tidepool data visualization for diabetes device data.",
   "keywords": [
     "data visualization"

src/colors.js

@@ -0,0 +1,64 @@
+export const system = {
+  // Black and White
+  white: '#FFFFFF',
+  black: '#000000',
+
+  // Grays
+  gray50: '#707070',
+  gray30: '#8C8C8C',
+  gray10: '#D9D9D9',
+  gray05: '#EBEBEB',
+  gray00: '#F6F6F6',
+
+  // Purples
+  purple90: '#271B46',
+
+  // Indigos
+  indigo50: '#4A60E2',
+  indigo30: '#627CFF',
+  indigo00: '#F4F5FF',
+
+  // Blues
+  blue80: '#375178',
+  blue60: '#EEF3FF',
+  blue50: '#4F6A92',
+  blue30: '#708FC2',
+  blue05: '#E1EAF9',
+  blue00: '#F0F5FF',
+
+  // BlueGrays
+  blueGray50: '#5F6B82',
+  blueGray50T: '#1F304FB3',
+  blueGray30: '#838CA0',
+  blueGray10: '#D1D6E1',
+
+  // Reds
+  red50: '#CC2900',
+  red30: '#EC4C47',
+  red05: '#FFECE9',
+
+  // Golds
+  gold50: '#A35700',
+  gold30: '#CC6D00',
+  gold05: '#FFE8CF',
+
+  // Greens
+  green50: '#00754E',
+  green30: '#08A057',
+  green05: '#DAF9E4',
+};
+
+export const bgChart = {
+  veryLow: '#E9695E',
+  low: '#F19181',
+  target: '#8DD0A9',
+  high: '#B69CE2',
+  veryHigh: '#856ACF',
+};
+
+const colors = {
+  ...system,
+  ...bgChart,
+};
+
+export default colors;

src/index.js

@@ -41,6 +41,8 @@ import { generateBgRangeLabels, isCustomBgRange, reshapeBgClassesToBgBounds } fr
 import { getTotalBasalFromEndpoints, getGroupDurations } from './utils/basal';
 import { DEFAULT_BG_BOUNDS } from './utils/constants';
 
+import colors from './colors';
+
 import {
   formatDateRange,
   formatTimeAgo,
@@ -161,6 +163,7 @@ const utils = {
 };
 
 export {
+  colors,
   components,
   containers,
   utils,