@automattic/vip-design-system 0.7.0 → 0.9.0

package/build/system/Tooltip/Tooltip.js

@@ -7,19 +7,31 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _md = require("react-icons/md");
 
-var _react = require("react");
+var TTip = _interopRequireWildcard(require("@radix-ui/react-tooltip"));
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["trigger", "text", "width", "children"];
+var _excluded = ["trigger", "text", "width", "children", "tooltipProps"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var StyledArrow = function StyledArrow(props) {
+  return (0, _jsxRuntime.jsx)(TTip.Arrow, _extends({
+    sx: {
+      fill: 'white'
+    }
+  }, props));
+};
 
 var Tooltip = function Tooltip(_ref) {
   var _ref$trigger = _ref.trigger,
@@ -29,28 +41,11 @@ var Tooltip = function Tooltip(_ref) {
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? 200 : _ref$width,
       children = _ref.children,
+      tooltipProps = _ref.tooltipProps,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var _useState = (0, _react.useState)({
-    left: 0,
-    top: '100%'
-  }),
-      position = _useState[0],
-      setPosition = _useState[1];
-
-  var contentRef = (0, _react.useCallback)(function (node) {
-    if (node !== null) {
-      var outerX = window.innerWidth;
-      var outerY = window.innerHeight;
-      var bounds = node.getBoundingClientRect();
-      console.log('bounds:', bounds);
-      setPosition({
-        left: bounds.x + bounds.width > outerX ? -bounds.width : 0,
-        top: bounds.y + bounds.height > outerY ? -bounds.height : '100%'
-      });
-    }
-  }, []);
-  return (0, _jsxRuntime.jsxs)(_.Box, {
+  return (0, _jsxRuntime.jsx)(TTip.Root, _extends({
+    skipDelayDuration: 700,
     sx: {
       display: 'inline-block',
       position: 'relative',
@@ -65,34 +60,41 @@ var Tooltip = function Tooltip(_ref) {
           visibility: 'visible'
         }
       }
-    },
-    children: [(0, _jsxRuntime.jsx)(_.Box, {
-      children: trigger
-    }), (0, _jsxRuntime.jsx)(_.Card, _extends({
-      ref: contentRef,
-      className: "tooltip-content",
+    }
+  }, tooltipProps, {
+    children: (0, _jsxRuntime.jsxs)(TTip.Trigger, {
       sx: {
-        position: 'absolute',
-        zIndex: 100,
-        left: position.left,
-        top: position.top,
-        width: width
-      }
-    }, props, {
-      children: children ? children : (0, _jsxRuntime.jsx)(_.Text, {
-        sx: {
-          fontSize: 1
-        },
-        children: text
-      })
-    }))]
-  });
+        background: 'transparent',
+        border: 'none',
+        display: 'inline-flex',
+        outline: 'none',
+        p: 0,
+        m: 0
+      },
+      children: [trigger, (0, _jsxRuntime.jsxs)(TTip.Content, {
+        children: [(0, _jsxRuntime.jsx)(_.Card, _extends({
+          className: "tooltip-content",
+          sx: {
+            width: width
+          }
+        }, props, {
+          children: children ? children : (0, _jsxRuntime.jsx)(_.Text, {
+            sx: {
+              fontSize: 1
+            },
+            children: text
+          })
+        })), (0, _jsxRuntime.jsx)(StyledArrow, {})]
+      })]
+    })
+  }));
 };
 
 exports.Tooltip = Tooltip;
 Tooltip.propTypes = {
-  trigger: _propTypes["default"].string,
-  width: _propTypes["default"].number,
+  children: _propTypes["default"].object,
   text: _propTypes["default"].string,
-  children: _propTypes["default"].object
+  tooltipProps: _propTypes["default"].object,
+  trigger: _propTypes["default"].string,
+  width: _propTypes["default"].number
 };

package/build/system/Wizard/WizardStep.js

@@ -32,7 +32,7 @@ var WizardStep = function WizardStep(_ref) {
   var borderLeftColor = 'border';
 
   if (complete) {
-    borderLeftColor = 'green.60';
+    borderLeftColor = 'success';
   } else if (active) {
     borderLeftColor = 'primary';
   }
@@ -40,7 +40,7 @@ var WizardStep = function WizardStep(_ref) {
   var color = 'muted';
 
   if (complete) {
-    color = 'green.60';
+    color = 'success';
   } else if (active) {
     color = 'heading';
   }
@@ -53,7 +53,7 @@ var WizardStep = function WizardStep(_ref) {
       backgroundColor: active ? 'card' : 'transparent',
       borderRadius: 0,
       borderBottom: active ? 'none' : '1px solid',
-      '&:first-child': {
+      '&:first-of-type': {
         borderTopWidth: active ? 'none' : '1px',
         borderTopStyle: active ? 'none' : 'solid'
       },
@@ -84,8 +84,8 @@ var WizardStep = function WizardStep(_ref) {
 
 exports.WizardStep = WizardStep;
 WizardStep.propTypes = {
-  title: _propTypes["default"].string,
-  subTitle: _propTypes["default"].string,
+  title: _propTypes["default"].node,
+  subTitle: _propTypes["default"].node,
   complete: _propTypes["default"].bool,
   active: _propTypes["default"].bool,
   children: _propTypes["default"].node.isRequired

package/build/system/Wizard/WizardStepHorizontal.js

@@ -43,7 +43,7 @@ var WizardStepHorizontal = function WizardStepHorizontal(_ref) {
 
 exports.WizardStepHorizontal = WizardStepHorizontal;
 WizardStepHorizontal.propTypes = {
-  title: _propTypes["default"].string,
-  subTitle: _propTypes["default"].string,
+  title: _propTypes["default"].node,
+  subTitle: _propTypes["default"].node,
   active: _propTypes["default"].bool
 };

package/build/system/index.js

@@ -54,8 +54,10 @@ exports.Input = _Form.Input;
 exports.Label = _Form.Label;
 exports.Toggle = _Form.Toggle;
 exports.ToggleRow = _Form.ToggleRow;
+exports.ToggleGroup = _Form.ToggleGroup;
 exports.Validation = _Form.Validation;
 exports.Radio = _Form.Radio;
+exports.RadioBoxGroup = _Form.RadioBoxGroup;
 exports.Select = _Form.Select;
 exports.Textarea = _Form.Textarea;
 exports.Checkbox = _Form.Checkbox;
@@ -84,13 +86,18 @@ var _Spinner = require("./Spinner");
 
 exports.Spinner = _Spinner.Spinner;
 
+var _ResourceList = require("./ResourceList");
+
+exports.ResourceList = _ResourceList.ResourceList;
+exports.ResourceItem = _ResourceList.ResourceItem;
+
 var _Tooltip = require("./Tooltip");
 
 exports.Tooltip = _Tooltip.Tooltip;
 
-var _Timeline = require("./Timeline");
+var _Time = require("./Time");
 
-exports.Timeline = _Timeline.Timeline;
+exports.Time = _Time.Time;
 
 var _Notification = require("./Notification");
 

package/build/system/theme/colors.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.colors = void 0;
+exports["default"] = exports.dark = exports.light = void 0;
 
 /** @jsxImportSource theme-ui */
 
@@ -71,100 +71,222 @@ exports["default"] = exports.colors = void 0;
 // 	return val;
 // }, {} );
 // export default huesObject;
-var colors = {
+var light = {
   black: 'rgba(19, 25, 30, 1)',
   brand: {
-    0: 'rgba(252, 250, 250, 1)',
-    3: 'rgba(245, 242, 241, 1)',
-    7: 'rgba(238, 234, 229, 1)',
-    10: 'rgba(234, 227, 218, 1)',
-    15: 'rgba(227, 208, 184, 1)',
-    20: 'rgba(223, 195, 158, 1)',
-    25: 'rgba(220, 180, 128, 1)',
-    30: 'rgba(216, 164, 95, 1)',
-    35: 'rgba(205, 155, 86, 1)',
-    40: 'rgba(191, 142, 76, 1)',
-    45: 'rgba(179, 131, 67, 1)',
-    50: 'rgba(165, 119, 59, 1)',
-    55: 'rgba(151, 106, 49, 1)',
-    60: 'rgba(136, 93, 38, 1)',
-    65: 'rgba(123, 82, 28, 1)',
-    70: 'rgba(110, 71, 16, 1)',
-    75: 'rgba(94, 57, 4, 1)',
-    80: 'rgba(82, 45, 0, 1)',
-    85: 'rgba(67, 34, 0, 1)',
-    90: 'rgba(53, 22, 1, 1)',
-    95: 'rgba(38, 8, 0, 1)',
-    100: 'rgba(30, 0, 0, 1)'
+    0: '#FEFDFB',
+    3: '#FDF9F5',
+    7: '#FAF3EA',
+    10: '#F7EBDC',
+    20: '#F2DFC8',
+    30: '#EBD1AF',
+    40: '#E0BD8F',
+    50: '#D8A45F',
+    60: '#B96B03',
+    70: '#B96B03',
+    80: '#AB6200',
+    90: '#915300',
+    100: '#2B1C08'
   },
   grey: {
-    0: 'rgba(250, 250, 250, 1)',
-    5: 'rgba(238, 238, 238, 1)',
-    10: 'rgba(225, 225, 225, 1)',
-    15: 'rgba(213, 213, 213, 1)',
-    20: 'rgba(201, 201, 201, 1)',
-    25: 'rgba(189, 189, 189, 1)',
-    30: 'rgba(176, 176, 176, 1)',
-    35: 'rgba(164, 164, 164, 1)',
-    40: 'rgba(152, 152, 152, 1)',
-    45: 'rgba(140, 140, 140, 1)',
-    50: 'rgba(128, 128, 128, 1)',
-    55: 'rgba(115, 115, 115, 1)',
-    60: 'rgba(103, 103, 103, 1)',
-    65: 'rgba(91, 91, 91, 1)',
-    70: 'rgba(79, 79, 79, 1)',
-    75: 'rgba(66, 66, 66, 1)',
-    80: 'rgba(54, 54, 54, 1)',
-    85: 'rgba(42, 42, 42, 1)',
-    90: 'rgba(30, 30, 30, 1)',
-    95: 'rgba(17, 17, 17, 1)',
-    100: 'rgba(5, 5, 5, 1)'
+    0: '#FDFDFC',
+    5: '#F9F9F8',
+    10: '#F3F3F2',
+    20: '#EEEEEC',
+    30: '#EAE8E7',
+    40: '#E4E2E1',
+    50: '#DCDAD8',
+    60: '#C9C6C2',
+    70: '#918F8D',
+    80: '#706F6C',
+    90: '#4E4D4B',
+    100: '#1C1A19'
+  },
+  blue: {
+    0: '#FAFEFE',
+    5: '#F3FCFD',
+    10: '#E9F9FB',
+    20: '#DAF5F8',
+    30: '#C3EEF3',
+    40: '#A9E3EA',
+    50: '#82D5DE',
+    60: '#41C4D2',
+    70: '#009FB1',
+    80: '#0090A0',
+    90: '#007A87',
+    100: '#002B2F'
   },
   green: {
-    0: 'rgba(245, 251, 247, 1)',
-    5: 'rgba(225, 243, 231, 1)',
-    10: 'rgba(198, 234, 208, 1)',
-    15: 'rgba(170, 225, 183, 1)',
-    20: 'rgba(137, 218, 160, 1)',
-    25: 'rgba(109, 209, 139, 1)',
-    30: 'rgba(77, 198, 121, 1)',
-    35: 'rgba(64, 186, 111, 1)',
-    40: 'rgba(48, 172, 99, 1)',
-    45: 'rgba(29, 161, 88, 1)',
-    50: 'rgba(1, 148, 77, 1)',
-    55: 'rgba(0, 136, 64, 1)',
-    60: 'rgba(0, 121, 52, 1)',
-    65: 'rgba(0, 109, 41, 1)',
-    70: 'rgba(0, 97, 30, 1)',
-    75: 'rgba(0, 81, 15, 1)',
-    80: 'rgba(0, 69, 2, 1)',
-    85: 'rgba(0, 55, 0, 1)',
-    90: 'rgba(1, 44, 0, 1)',
-    95: 'rgba(1, 27, 0, 1)',
-    100: 'rgba(1, 8, 0, 1)'
+    0: '#FBFEFC',
+    5: '#F2FCF7',
+    10: '#E9F9F1',
+    20: '#DDF2E8',
+    30: '#CBEADB',
+    40: '#B3DEC9',
+    50: '#91CDB0',
+    60: '#5BB98C',
+    70: '#30A46C',
+    80: '#299762',
+    90: '#18794B',
+    100: '#153224'
+  },
+  pink: {
+    0: 'rgba(255, 248, 246, 1)',
+    5: 'rgba(255, 232, 230, 1)',
+    10: 'rgba(255, 214, 210, 1)',
+    15: 'rgba(255, 197, 193, 1)',
+    20: 'rgba(251, 183, 180, 1)',
+    25: 'rgba(239, 171, 168, 1)',
+    30: 'rgba(226, 158, 157, 1)',
+    35: 'rgba(212, 146, 148, 1)',
+    40: 'rgba(202, 133, 136, 1)',
+    45: 'rgba(188, 122, 126, 1)',
+    50: 'rgba(176, 109, 116, 1)',
+    55: 'rgba(163, 95, 106, 1)',
+    60: 'rgba(149, 83, 93, 1)',
+    65: 'rgba(137, 71, 85, 1)',
+    70: 'rgba(124, 57, 74, 1)',
+    75: 'rgba(109, 41, 62, 1)',
+    80: 'rgba(95, 30, 52, 1)',
+    85: 'rgba(83, 14, 43, 1)',
+    90: 'rgba(69, 0, 31, 1)',
+    95: 'rgba(53, 0, 18, 1)',
+    100: 'rgba(46, 0, 3, 1)'
+  },
+  salmon: {
+    0: 'rgba(254, 248, 248, 1)',
+    5: 'rgba(254, 233, 228, 1)',
+    10: 'rgba(254, 214, 206, 1)',
+    15: 'rgba(254, 195, 177, 1)',
+    20: 'rgba(255, 178, 150, 1)',
+    25: 'rgba(255, 163, 120, 1)',
+    30: 'rgba(249, 148, 94, 1)',
+    35: 'rgba(237, 137, 85, 1)',
+    40: 'rgba(224, 123, 77, 1)',
+    45: 'rgba(210, 113, 70, 1)',
+    50: 'rgba(197, 101, 63, 1)',
+    55: 'rgba(181, 86, 56, 1)',
+    60: 'rgba(167, 73, 48, 1)',
+    65: 'rgba(153, 60, 43, 1)',
+    70: 'rgba(137, 47, 38, 1)',
+    75: 'rgba(124, 30, 30, 1)',
+    80: 'rgba(108, 15, 23, 1)',
+    85: 'rgba(94, 0, 16, 1)',
+    90: 'rgba(78, 0, 0, 1)',
+    95: 'rgba(62, 0, 1, 1)',
+    100: 'rgba(52, 0, 2, 1)'
+  },
+  orange: {
+    0: 'rgba(255, 249, 241, 1)',
+    5: 'rgba(255, 233, 219, 1)',
+    10: 'rgba(255, 215, 189, 1)',
+    15: 'rgba(255, 195, 159, 1)',
+    20: 'rgba(255, 178, 126, 1)',
+    25: 'rgba(254, 159, 95, 1)',
+    30: 'rgba(255, 139, 64, 1)',
+    35: 'rgba(255, 123, 40, 1)',
+    40: 'rgba(244, 110, 21, 1)',
+    45: 'rgba(231, 98, 5, 1)',
+    50: 'rgba(215, 80, 1, 1)',
+    55: 'rgba(197, 73, 0, 1)',
+    60: 'rgba(180, 60, 0, 1)',
+    65: 'rgba(165, 49, 0, 1)',
+    70: 'rgba(148, 38, 1, 1)',
+    75: 'rgba(129, 23, 1, 1)',
+    80: 'rgba(111, 8, 1, 1)',
+    85: 'rgba(95, 0, 0, 1)',
+    90: 'rgba(78, 0, 0, 1)',
+    95: 'rgba(60, 0, 0, 1)',
+    100: 'rgba(50, 0, 3, 1)'
+  },
+  yellow: {
+    0: '#FEFDFB',
+    5: '#FFF9EF',
+    10: '#FFF2DE',
+    20: '#FFEAC8',
+    30: '#FFE0B0',
+    40: '#FFD28B',
+    50: '#F2BB62',
+    60: '#EA9F28',
+    70: '#FFB031',
+    80: '#FBA318',
+    90: '#9C6000',
+    100: '#412800'
+  },
+  red: {
+    0: '#FFFCFC',
+    5: '#FFF8F7',
+    10: '#FFF0EF',
+    20: '#FFE6E4',
+    30: '#FED7D4',
+    40: '#FDC5C1',
+    50: '#F8ACA7',
+    60: '#F08D86',
+    70: '#F04539',
+    80: '#E63B2F',
+    90: '#D42B1E',
+    100: '#361513'
+  }
+};
+exports.light = light;
+var dark = {
+  black: 'rgba(19, 25, 30, 1)',
+  brand: {
+    0: '#1A160F',
+    3: '#231809',
+    7: '#301F08',
+    10: '#301F08',
+    20: '#3A2406',
+    30: '#432804',
+    40: '#502E01',
+    50: '#603700',
+    60: '#774400',
+    70: '#B96B03',
+    80: '#C37A19',
+    90: '#CA8529',
+    100: '#FAF2E7'
+  },
+  grey: {
+    0: '#161615',
+    5: '#1C1C1B',
+    10: '#242221',
+    20: '#282827',
+    30: '#2F2D2C',
+    40: '#353431',
+    50: '#3F3D3B',
+    60: '#524F4C',
+    70: '#726F6A',
+    80: '#807D78',
+    90: '#A29F9B',
+    100: '#EDEDEC'
   },
   blue: {
-    0: 'rgba(250, 251, 255, 1)',
-    5: 'rgba(229, 240, 246, 1)',
-    10: 'rgba(205, 230, 235, 1)',
-    15: 'rgba(178, 221, 230, 1)',
-    20: 'rgba(148, 212, 222, 1)',
-    25: 'rgba(119, 202, 216, 1)',
-    30: 'rgba(84, 192, 205, 1)',
-    35: 'rgba(48, 181, 196, 1)',
-    40: 'rgba(25, 168, 184, 1)',
-    45: 'rgba(0, 155, 173, 1)',
-    50: 'rgba(1, 144, 160, 1)',
-    55: 'rgba(0, 130, 146, 1)',
-    60: 'rgba(0, 117, 134, 1)',
-    65: 'rgba(0, 105, 121, 1)',
-    70: 'rgba(0, 91, 109, 1)',
-    75: 'rgba(0, 77, 95, 1)',
-    80: 'rgba(0, 66, 82, 1)',
-    85: 'rgba(0, 51, 68, 1)',
-    90: 'rgba(1, 40, 57, 1)',
-    95: 'rgba(0, 28, 42, 1)',
-    100: 'rgba(0, 10, 35, 1)'
+    0: '#0B1A1C',
+    5: '#062124',
+    10: '#032D31',
+    20: '#00353B',
+    30: '#003C42',
+    40: '#00444C',
+    50: '#005059',
+    60: '#00636E',
+    70: '#009FB1',
+    80: '#09BDD2',
+    90: '#2AC5D7',
+    100: '#E6F9FB'
+  },
+  green: {
+    0: '#0D1913',
+    5: '#0C1F16',
+    10: '#0F291D',
+    20: '#113122',
+    30: '#133927',
+    40: '#16442E',
+    50: '#1B5439',
+    60: '#236E4A',
+    70: '#30A46C',
+    80: '#3CB179',
+    90: '#4CC389',
+    100: '#E4FAF0'
   },
   pink: {
     0: 'rgba(255, 248, 246, 1)',
@@ -236,52 +358,34 @@ var colors = {
     100: 'rgba(50, 0, 3, 1)'
   },
   yellow: {
-    0: 'rgba(255, 249, 241, 1)',
-    5: 'rgba(255, 233, 209, 1)',
-    10: 'rgba(255, 216, 165, 1)',
-    15: 'rgba(255, 200, 118, 1)',
-    20: 'rgba(255, 184, 74, 1)',
-    25: 'rgba(255, 169, 32, 1)',
-    30: 'rgba(240, 157, 1, 1)',
-    35: 'rgba(226, 145, 1, 1)',
-    40: 'rgba(211, 133, 0, 1)',
-    45: 'rgba(198, 122, 0, 1)',
-    50: 'rgba(184, 110, 1, 1)',
-    55: 'rgba(169, 97, 0, 1)',
-    60: 'rgba(152, 86, 0, 1)',
-    65: 'rgba(137, 75, 0, 1)',
-    70: 'rgba(123, 63, 1, 1)',
-    75: 'rgba(104, 51, 1, 1)',
-    80: 'rgba(89, 40, 0, 1)',
-    85: 'rgba(73, 29, 0, 1)',
-    90: 'rgba(59, 18, 0, 1)',
-    95: 'rgba(43, 4, 0, 1)',
-    100: 'rgba(35, 0, 0, 1)'
+    0: '#1F1300',
+    5: '#261700',
+    10: '#301E00',
+    20: '#3B2400',
+    30: '#462B00',
+    40: '#553400',
+    50: '#674003',
+    60: '#804F00',
+    70: '#FFB031',
+    80: '#FFC568',
+    90: '#F69E12',
+    100: '#FFF2DE'
   },
   red: {
-    0: 'rgba(255, 246, 249, 1)',
-    5: 'rgba(255, 231, 229, 1)',
-    10: 'rgba(255, 213, 206, 1)',
-    15: 'rgba(255, 195, 185, 1)',
-    20: 'rgba(255, 176, 161, 1)',
-    25: 'rgba(254, 157, 140, 1)',
-    30: 'rgba(255, 136, 114, 1)',
-    35: 'rgba(255, 116, 95, 1)',
-    40: 'rgba(255, 95, 77, 1)',
-    45: 'rgba(248, 77, 60, 1)',
-    50: 'rgba(231, 65, 53, 1)',
-    55: 'rgba(211, 55, 43, 1)',
-    60: 'rgba(191, 42, 35, 1)',
-    65: 'rgba(173, 34, 31, 1)',
-    70: 'rgba(154, 26, 25, 1)',
-    75: 'rgba(132, 11, 16, 1)',
-    80: 'rgba(113, 2, 8, 1)',
-    85: 'rgba(94, 0, 0, 1)',
-    90: 'rgba(74, 0, 1, 1)',
-    95: 'rgba(56, 0, 1, 1)',
-    100: 'rgba(46, 0, 2, 1)'
+    0: '#1E1313',
+    5: '#2B1311',
+    10: '#3C1714',
+    20: '#491915',
+    30: '#561B17',
+    40: '#681E19',
+    50: '#832019',
+    60: '#AC241A',
+    70: '#F04539',
+    80: '#F6574B',
+    90: '#FA6459',
+    100: '#FFEEED'
   }
 };
-exports.colors = colors;
-var _default = colors;
+exports.dark = dark;
+var _default = light;
 exports["default"] = _default;