@megafon/ui-core 2.5.0 → 3.0.0-beta.11

package/CHANGELOG.md

@@ -3,45 +3,192 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [2.5.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.4.0...@megafon/ui-core@2.5.0) (2022-02-07)
+# [3.0.0-beta.11](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.10...@megafon/ui-core@3.0.0-beta.11) (2022-02-09)
+
+
+### Bug Fixes
+
+* **switcher:** fix switcher design ([ea3a6dd](https://github.com/MegafonWebLab/megafon-ui/commit/ea3a6dd602de011e1e5f19e118b9cb565f846fbf))
+
+
+
+
+
+# [3.0.0-beta.10](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.9...@megafon/ui-core@3.0.0-beta.10) (2022-02-08)
+
+
+### Bug Fixes
+
+* **paragraph:** remove spbSky... values from color prop ([4dfc14e](https://github.com/MegafonWebLab/megafon-ui/commit/4dfc14ec86d446e71a64724f201e1de720690728))
+
+
+### BREAKING CHANGES
+
+* **paragraph:** remove from color prop values: spbSky0, spbSky1, spbSky2
+
+
+
+
+
+# [3.0.0-beta.9](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.8...@megafon/ui-core@3.0.0-beta.9) (2022-02-08)
 
 
 ### Features
 
-* **tabs:** add prop outerObserveContainer for observing sticky mode from outside ([bc20c76](https://github.com/MegafonWebLab/megafon-ui/commit/bc20c76f497d88da19ea03cfc66a0c38a7559698))
+* **select:** made select as a functional component ([b45e697](https://github.com/MegafonWebLab/megafon-ui/commit/b45e697de696f892a42a8fa5756289183624fed6))
+
 
 
 
 
+# [3.0.0-beta.8](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.7...@megafon/ui-core@3.0.0-beta.8) (2022-02-08)
+
+
+### Features
 
-# [2.4.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.3.0...@megafon/ui-core@2.4.0) (2022-01-31)
+* **accordion:** remove prop hasVerticalPaddings ([4da8d8e](https://github.com/MegafonWebLab/megafon-ui/commit/4da8d8e7ee843be266749c4e4a8e35c678b9dc2e))
+
+
+### BREAKING CHANGES
+
+* **accordion:** remove prop hasVerticalPaddings
+
+
+
+
+
+# [3.0.0-beta.7](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.6...@megafon/ui-core@3.0.0-beta.7) (2022-02-04)
 
 
 ### Bug Fixes
 
-* **link:** new prop dataAttrs ([bde2253](https://github.com/MegafonWebLab/megafon-ui/commit/bde22539ff0db11777be9193adceb6de0f984234))
+* **components:** change tests for dataAttrs prop ([2a8f306](https://github.com/MegafonWebLab/megafon-ui/commit/2a8f3061a4e89f6877894e5947db7bae2827f86a))
 
 
 ### Features
 
-* **banner:** add props withPaginationBottomOffset ([c1485a0](https://github.com/MegafonWebLab/megafon-ui/commit/c1485a083d63b886419109b03bb31230c5fed890))
+* **components:** add dataAttrs props in new format ([026d868](https://github.com/MegafonWebLab/megafon-ui/commit/026d8681743d55ea8c93d17000a64959093f7a05))
 
 
 
 
 
-# [2.3.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.2.0...@megafon/ui-core@2.3.0) (2022-01-24)
+# [3.0.0-beta.6](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.5...@megafon/ui-core@3.0.0-beta.6) (2022-02-02)
 
 
 ### Bug Fixes
 
-* **search:** prevents default action when a menu item is selected and the enter button is pressed ([054cbcf](https://github.com/MegafonWebLab/megafon-ui/commit/054cbcf3457ff779443a82b5ae6383fda57f9cc7))
+* color props values changes ([b279f2b](https://github.com/MegafonWebLab/megafon-ui/commit/b279f2b5af0edae92fe9825bbfa90a207cb8009a))
+* remove deprecated props values ([add76f3](https://github.com/MegafonWebLab/megafon-ui/commit/add76f38a9ebad8b5b6504dfe6aae862746f0dfc))
+* **colors:** rename green and purple to brandGreen and brandPurple ([2266734](https://github.com/MegafonWebLab/megafon-ui/commit/2266734336be1a0faa5f1736fdf39070442837b3))
+* **core:** fix build ui-core ([458c824](https://github.com/MegafonWebLab/megafon-ui/commit/458c824aab639e4802db261d0416b3cee58ac274))
+* **core:** separated colors.css file ([f0a4d72](https://github.com/MegafonWebLab/megafon-ui/commit/f0a4d728e0b30c5caeae5c8d9607e624fb4ea288))
+* **textlink:** fix color prop type ([6edcea0](https://github.com/MegafonWebLab/megafon-ui/commit/6edcea06ce26d137611aaf022d3ee6f7da295366))
+
+
+### BREAKING CHANGES
+
+* ContentArea: prop color change values from 'base' to 'white' and from 'content' to 'default';
+remove depreacted value 'freshAsphalt'
+Paragraph: prop color change values from 'base' to 'white' and from 'contend' to 'default';
+remove deprecared values 'freshAsphalt' and 'clearWhite'
+StoreBanner: prop theme change value from 'black' to 'default'; remove deprecated value 'clearWhite'
+* ContentArea, Paragraph, StoreBanner and Breadcrumbs components from no don't have
+freshAsphalt and clearWhite as values for colorize props
+
+
+
+
+
+# [3.0.0-beta.5](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.4...@megafon/ui-core@3.0.0-beta.5) (2022-01-28)
 
 
 ### Features
 
-* **accordion:** props hasVerticalPaddings marked as deprecated ([4d6d4cc](https://github.com/MegafonWebLab/megafon-ui/commit/4d6d4cca2cf45a86441827f0bef625a88a2c44f8))
-* **textfield:** add autocomplete prop ([f2cff94](https://github.com/MegafonWebLab/megafon-ui/commit/f2cff9403503de174b785ea02365ce470811369e))
+* **header:** made header as a functional component ([81701ad](https://github.com/MegafonWebLab/megafon-ui/commit/81701ad87b6e9df2fe630bf4e183383264c0bb01))
+* **radiobutton:** made radiobutton as a functional component ([65406af](https://github.com/MegafonWebLab/megafon-ui/commit/65406afc90fd82f7eb0fdcbbe78569fc98164e78))
+
+
+
+
+
+# [3.0.0-beta.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.3...@megafon/ui-core@3.0.0-beta.4) (2022-01-27)
+
+**Note:** Version bump only for package @megafon/ui-core
+
+
+
+
+
+# [3.0.0-beta.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.2...@megafon/ui-core@3.0.0-beta.3) (2022-01-24)
+
+
+### Bug Fixes
+
+* **accordion:** add focus on arrow after tab press, add open/close accordion after enter press ([9bfa0ac](https://github.com/MegafonWebLab/megafon-ui/commit/9bfa0ac5348ac25c0e37a4df51e26e2dabde02ba))
+* **accordion:** change type of onClickAccordion prop ([9a150c5](https://github.com/MegafonWebLab/megafon-ui/commit/9a150c5de309547763a714b0eb630dfb386a8107))
+* **calendar/month:** add focus on month arrows, add enter press handlers ([63f1e47](https://github.com/MegafonWebLab/megafon-ui/commit/63f1e4761e57ed6d56464b632dce9fd5e77655e1))
+* **checkbox:** add focus on custom checkbox, add enter press handler ([83d111d](https://github.com/MegafonWebLab/megafon-ui/commit/83d111d0e4b41d3915bdd079bed4a7f9715ce7a5))
+* **checkbox:** add isChecked state, change type of onChange prop ([f535caf](https://github.com/MegafonWebLab/megafon-ui/commit/f535caf39a02ab6793d3c63b654a1f1f3e9b2b93))
+* **tooltip:** add check event function from ui-helpers ([a784ab4](https://github.com/MegafonWebLab/megafon-ui/commit/a784ab4f288124eb941fe8f52e46b2efc9aa2f82))
+
+
+### BREAKING CHANGES
+
+* **checkbox:** change type of onChange prop on (checked: boolean) => void
+* **accordion:** remove parameter 'title' in onClickAccordion prop
+* **tooltip:** change onOpen, onClose types; AccessibilityEventTypeNative from @megafon/ui-helpers
+
+
+
+
+
+# [3.0.0-beta.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.1...@megafon/ui-core@3.0.0-beta.2) (2022-01-21)
+
+**Note:** Version bump only for package @megafon/ui-core
+
+
+
+
+
+# [3.0.0-beta.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.0...@megafon/ui-core@3.0.0-beta.1) (2022-01-20)
+
+
+### Bug Fixes
+
+* **colors:** fix colors component ([3061f7c](https://github.com/MegafonWebLab/megafon-ui/commit/3061f7c7b56d5baa32f109d7ce941bcc7e70c5b9))
+* **colors:** remove unused classname modifiers ([d919cdc](https://github.com/MegafonWebLab/megafon-ui/commit/d919cdcf1fa79d60230fc85811518ded1c0537ad))
+* **colors:** remove unused method ([2970295](https://github.com/MegafonWebLab/megafon-ui/commit/2970295df9053a4f54ed19d3d46deb07994844e0))
+* **colors:** renabe green and purple to brandGreen and brandPurple to avoid postcss-colormin bug ([563d97c](https://github.com/MegafonWebLab/megafon-ui/commit/563d97c42900099415a6872f57b500b87aeed647))
+* **colors:** update color values on colors page when user switches theme ([8552ff6](https://github.com/MegafonWebLab/megafon-ui/commit/8552ff69a66153ef890437ffc4dd2e50c31d6f2e))
+* **less:** import base.less file through reference ([5a13aae](https://github.com/MegafonWebLab/megafon-ui/commit/5a13aaedec3a7fd09f77dcddfe437fda604f60a5))
+
+
+### Features
+
+* **styles:** export css version for base.less ([14aff17](https://github.com/MegafonWebLab/megafon-ui/commit/14aff17f8d3f77ec7beb2e3cb5c8a489ecd77e74))
+
+
+### BREAKING CHANGES
+
+* **colors:** green, green20, green80, purple, purple20 and purple80 colors now have 'brand'
+prefix (e.g. brandGreen)
+
+
+
+
+
+# [3.0.0-beta.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.2.0...@megafon/ui-core@3.0.0-beta.0) (2022-01-19)
+
+
+### Features
+
+* **colors:** css custom properties and color themes support ([b19a9a5](https://github.com/MegafonWebLab/megafon-ui/commit/b19a9a5112ebc7427d60f6514d606dd9d71ca444))
+
+
+### BREAKING CHANGES
+
+* **colors:** read commit description
 
 
 

package/dist/es/colors/ColorItem/ColorItem.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .color-item {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -46,7 +39,7 @@ h5 {
   line-height: 20px;
 }
 .color-item__code {
-  color: #33333380;
+  color: var(--spbSky3);
   font-size: 12px;
   line-height: 18px;
 }

package/dist/es/colors/ColorItem/ColorItem.js

@@ -23,7 +23,7 @@ var ColorItem = function ColorItem(_ref) {
   }), !!parentColorCode && /*#__PURE__*/React.createElement("div", {
     className: cn('parent-color'),
     style: {
-      background: parentColorCode
+      background: "var(--".concat(parentColorCode, ")")
     }
   })), /*#__PURE__*/React.createElement("span", {
     className: cn('name')

package/dist/es/colors/Colors.css

@@ -1,14 +1,7 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .colors__inner {
   margin: 0 -80px;
   padding: 56px 80px 40px;
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 @media screen and (max-width: 1120px) {
   .colors__inner {
@@ -90,7 +83,6 @@ h5 {
 .colors__description {
   position: relative;
   padding-top: 15px;
-  color: #33333380;
   font-size: 12px;
   line-height: 18px;
   text-align: center;
@@ -198,7 +190,7 @@ h5 {
   display: block;
   width: 100%;
   height: 1px;
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
@@ -209,7 +201,7 @@ h5 {
   position: absolute;
   width: 1px;
   height: 4px;
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 .colors__underline:after,
 .colors__underline:before {

package/dist/es/colors/Colors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import './Colors.less';
-declare const Colors: React.FC;
+declare const Colors: () => JSX.Element;
 export default Colors;

package/dist/es/colors/Colors.js

@@ -1,7 +1,9 @@
 import "core-js/modules/es.symbol";
 import "core-js/modules/es.symbol.description";
+import "core-js/modules/es.array.includes";
 import "core-js/modules/es.array.map";
 import "core-js/modules/es.function.name";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { cnCreate } from '@megafon/ui-helpers';
@@ -103,10 +105,68 @@ var basic = colorsData.basic,
     gradientColors = colorsData.gradientColors,
     staticColors = colorsData.staticColors,
     staticOpacity = colorsData.staticOpacity,
-    soft = colorsData.soft;
+    soft = colorsData.soft; // TODO: refactor this
+
+var getThemeFromLocalStorage = function getThemeFromLocalStorage() {
+  var theme = 'light';
+
+  if (typeof window !== 'undefined') {
+    var localStorageTheme = String(window.localStorage.getItem('theme'));
+
+    if (['light', 'dark'].includes(localStorageTheme)) {
+      theme = localStorageTheme;
+    }
+  }
+
+  return theme;
+};
+
 var cn = cnCreate('colors');
 
 var Colors = function Colors() {
+  var _React$useState = React.useState(getThemeFromLocalStorage()),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      setCurrentTheme = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      setLoad = _React$useState4[1];
+
+  React.useEffect(function () {
+    function load() {
+      setLoad(true);
+      document.removeEventListener('css-var-load', load);
+    }
+
+    document.addEventListener('css-var-load', load);
+  }, []);
+
+  var getCurrentColorValue = function getCurrentColorValue(code) {
+    return typeof document !== 'undefined' ? document.documentElement.style.getPropertyValue("--".concat(code)) : '';
+  };
+
+  React.useEffect(function () {
+    // theme switcher from src/gatsby-theme-docz/components/SideBar/index.tsx
+    var themeSwitcher = document.querySelector('[data-current-theme]');
+
+    if (themeSwitcher) {
+      var themeSwitcherObserver = new MutationObserver(function (mutationsList) {
+        var data = mutationsList[0];
+        setCurrentTheme(data.oldValue === 'light' ? 'dark' : 'light');
+      });
+      var config = {
+        attributeOldValue: true,
+        attributeFilter: ['data-current-theme']
+      };
+      themeSwitcherObserver.observe(themeSwitcher, config);
+      return function () {
+        return themeSwitcherObserver.disconnect();
+      };
+    }
+
+    return undefined;
+  }, []);
+
   var renderUnderline = function renderUnderline() {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('underline')
@@ -142,7 +202,7 @@ var Colors = function Colors() {
         return /*#__PURE__*/React.createElement(ColorItem, {
           className: cn('item'),
           colorName: name,
-          colorCode: code,
+          colorCode: getCurrentColorValue(code),
           key: name,
           border: border
         });
@@ -172,7 +232,7 @@ var Colors = function Colors() {
       return /*#__PURE__*/React.createElement(ColorItem, {
         className: cn('item'),
         colorName: name,
-        colorCode: code,
+        colorCode: getCurrentColorValue(code),
         gradient: gradient,
         key: name,
         border: border
@@ -204,7 +264,7 @@ var Colors = function Colors() {
           soft: true
         }),
         colorName: name,
-        colorCode: code,
+        colorCode: getCurrentColorValue(code),
         parentColorCode: parentColor,
         key: name
       });

package/dist/es/colors/colorsData.js

@@ -4,34 +4,35 @@ var colors = {
     colorsGroup: [{
       description: 'Основные цвета бренда',
       colors: [{
-        name: 'Green',
-        code: '#00B956'
+        name: 'Brand Green',
+        code: 'brandGreen'
       }, {
-        name: 'Purple',
-        code: '#731982'
+        name: 'Brand Purple',
+        code: 'brandPurple'
       }]
     }, {
       description: 'Градация оттенков серого',
       colors: [{
         name: 'Base',
-        code: '#FFFFFF',
-        border: '1px solid #EDEDED'
+        code: 'base',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'Content',
-        code: '#333333'
+        code: 'content',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'Spb Sky 0',
-        code: '#F6F6F6',
-        border: '2px solid #EDEDED'
+        code: 'spbSky0',
+        border: '2px solid var(--spbSky1)'
       }, {
         name: 'Spb Sky 1',
-        code: '#EDEDED'
+        code: 'spbSky1'
       }, {
         name: 'Spb Sky 2',
-        code: '#D8D8D8'
+        code: 'spbSky2'
       }, {
         name: 'Spb Sky 3',
-        code: '#999999'
+        code: 'spbSky3'
       }]
     }]
   },
@@ -41,16 +42,16 @@ var colors = {
       description: 'Акцентные цвета',
       colors: [{
         name: 'Warm Red C',
-        code: '#EB5A40'
+        code: 'warmRedC'
       }, {
         name: '137C',
-        code: '#FFA717'
+        code: '137C'
       }, {
         name: '311C',
-        code: '#5BD9E5'
+        code: '311C'
       }, {
         name: 'Reflex Blue',
-        code: '#444189'
+        code: 'reflexBlue'
       }]
     }
   },
@@ -60,22 +61,22 @@ var colors = {
       description: 'Системные цвета, используемые для отображения состояний интерфейсов и ссылок',
       colors: [{
         name: 'Fury',
-        code: '#F62434'
+        code: 'fury'
       }, {
         name: 'System Blue',
-        code: '#34AAF2'
+        code: 'systemBlue'
       }, {
         name: 'Background',
-        code: '#FFFFFF'
+        code: 'background'
       }, {
         name: 'Button Hov. G.',
-        code: '#10E272'
+        code: 'buttonHoverGreen'
       }, {
         name: 'Button Hov. P.',
-        code: '#A500BF'
+        code: 'buttonhoverPurple'
       }, {
         name: 'Button Down',
-        code: '#404D46'
+        code: 'buttonDown'
       }]
     }
   },
@@ -85,15 +86,15 @@ var colors = {
       description: 'Градиентные заливки ',
       colors: [{
         name: 'Basic',
-        code: '#01873F #00B956 #14CD6A',
+        code: 'gradientBasic',
         gradient: 'linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%)'
       }, {
         name: 'VIP',
-        code: '#5B1168 #731982 #821E93',
+        code: 'gradientVIP',
         gradient: 'linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%)'
       }, {
         name: 'Exclusive',
-        code: '#2A2674 #444189 #504D93',
+        code: 'gradientExclusive',
         gradient: 'linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%)'
       }]
     }
@@ -104,11 +105,12 @@ var colors = {
       description: 'Цвета не зависящие от темы',
       colors: [{
         name: 'STC White',
-        code: '#FFFFFFF',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black',
-        code: '#333333'
+        code: 'stcBlack',
+        border: '1px solid var(--spbSky1)'
       }]
     }
   },
@@ -118,31 +120,36 @@ var colors = {
       description: 'Цвета c прозрачностью не зависящие от темы',
       colors: [{
         name: 'STC White 5%',
-        code: '#FFFFFF0D',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite5',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC White 10%',
-        code: '#FFFFFF1A',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite10',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC White 20%',
-        code: '#FFFFFF33',
-        border: '1px solid #EDEDED'
+        code: 'stcWhite20',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC White 50%',
-        code: '#FFFFFF80'
+        code: 'stcWhite50',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 5%',
-        code: '#3333330D'
+        code: 'stcBlack5',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 10%',
-        code: '#3333331A'
+        code: 'stcBlack10',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 20%',
-        code: '#33333333'
+        code: 'stcBlack20',
+        border: '1px solid var(--spbSky1)'
       }, {
         name: 'STC Black 50%',
-        code: '#33333380'
+        code: 'stcBlack50',
+        border: '1px solid var(--spbSky1)'
       }]
     }
   },
@@ -151,61 +158,61 @@ var colors = {
     colorsList: {
       description: 'Дополнительная (вспомогательная) палитра, образованная от Basic, Secondary и System цветов. Каждый цвет из Soft палитры работает в паре с его родительским цветом.',
       colors: [{
-        name: 'Green 80',
-        code: '#0CDC78',
-        parentColor: '#00B956'
+        name: 'Brand Green 80',
+        code: 'brandGreen80',
+        parentColor: 'green'
       }, {
-        name: 'Purple 80',
-        code: '#AA67C1',
-        parentColor: '#731982'
+        name: 'Brand Purple 80',
+        code: 'brandPurple80',
+        parentColor: 'purple'
       }, {
         name: 'Warm Red C 80',
-        code: '#FF765D',
-        parentColor: '#EB5A40'
+        code: 'warmRedC80',
+        parentColor: 'warmRedC'
       }, {
         name: '137C 80',
-        code: '#FFB945',
-        parentColor: '#FFB945'
+        code: '137C80',
+        parentColor: '137C'
       }, {
         name: '311C 80',
-        code: '#62E3FF',
-        parentColor: '#5BD9E5'
+        code: '311C80',
+        parentColor: '311C'
       }, {
         name: 'Reflex Blue 80',
-        code: '#554FC9',
-        parentColor: '#444189'
+        code: 'reflexBlue80',
+        parentColor: 'reflexBlue'
       }, {
         name: 'Fury 80',
-        code: '#F8505D',
-        parentColor: '#F62434'
+        code: 'fury80',
+        parentColor: 'fury'
       }, {
-        name: 'Green 20',
-        code: '#DDFFEC',
-        parentColor: '#00B956'
+        name: 'Brand Green 20',
+        code: 'brandGreen20',
+        parentColor: 'green'
       }, {
-        name: 'Purple 20',
-        code: '#FFEEFF',
-        parentColor: '#731982'
+        name: 'Brand Purple 20',
+        code: 'brandPurple20',
+        parentColor: 'purple'
       }, {
         name: 'Warm Red C 20',
-        code: '#FFCFC7',
-        parentColor: '#EB5A40'
+        code: 'warmRedC20',
+        parentColor: 'warmRedC'
       }, {
         name: '137C 20',
-        code: '#FFEDD1',
-        parentColor: '#FFB945'
+        code: '137C20',
+        parentColor: '137C'
       }, {
         name: '311C 20',
-        code: '#E1FAFF',
-        parentColor: '#5BD9E5'
+        code: '311C20',
+        parentColor: '311C'
       }, {
         name: 'Reflex Blue 20',
-        code: '#EBEAFF',
-        parentColor: '#444189'
+        code: 'reflexBlue20',
+        parentColor: 'reflexBlue'
       }, {
         name: 'Fury 20',
-        code: '#FFC5C9',
-        parentColor: '#F62434'
+        code: 'fury20',
+        parentColor: 'fury'
       }]
     }
   }