tokens: update red and green system hues

.eslintrc.js

@@ -106,13 +106,14 @@ module.exports = {
       'error',
       { extensions: ['.tsx'] },
     ],
+    'react-hooks/exhaustive-deps': 'warn',
+    'react-hooks/rules-of-hooks': 'error',
+    'react/display-name': 'off',
     'react/jsx-key': 'warn',
     'react/jsx-no-comment-textnodes': 'off',
     'react/no-children-prop': 'off',
     'react/no-unescaped-entities': 'off',
     'react/prop-types': 'off',
-    'react/display-name': 'off',
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'warn',
+    'react/react-in-jsx-scope': 'off',
   },
 };

babel.config.js

@@ -1,11 +1,6 @@
 module.exports = {
   presets: [
-    [
-      '@babel/preset-react',
-      {
-        runtime: 'automatic',
-      },
-    ],
+    ['@babel/preset-react', { runtime: 'automatic' }],
     ['@babel/preset-typescript'],
     [
       '@babel/preset-env',

src/color/colors.ts

@@ -5,9 +5,9 @@ export interface Color {
 }
 
 export enum Colors {
-  Red = '#ff4d4d',
+  Red = '#E22B12',
   Blue = '#00adef',
-  Green = '#4EC437',
+  Green = '#28A878',
   Yellow = '#ffb21e',
   Slate = '#657987',
   Grayscale = '#666666',
@@ -27,20 +27,20 @@ export const black = '#000000';
 export const white = '#FFFFFF';
 
 const RedCache = {
-  '50': '#ffeded',
-  '100': '#ffdbdb',
-  '200': '#ffb7b7',
-  '300': '#ff9494',
-  '350': '#ff8282',
-  '400': '#ff7070',
-  '500': '#ff4d4d',
-  '525': '#fc3f3f',
-  '600': '#db2e2e',
-  '700': '#a72020',
-  '800': '#711313',
-  '850': '#540f0f',
-  '900': '#380909',
-  '950': '#1c0404',
+  '50': '#fee7e5',
+  '100': '#fdd1cb',
+  '200': '#faa599',
+  '300': '#f77866',
+  '350': '#f5624e',
+  '400': '#f34c35',
+  '500': '#E22B12',
+  '525': '#e21f05',
+  '600': '#c01902',
+  '700': '#911100',
+  '800': '#610c00',
+  '850': '#480800',
+  '900': '#300600',
+  '950': '#170300',
 };
 
 export const red: Color = (grade) =>
@@ -67,20 +67,20 @@ export const yellow: Color = (grade) =>
   YellowCache[grade] || irisColor(Colors.Yellow, grade);
 
 const GreenCache = {
-  '50': '#eefaea',
-  '100': '#dbf4d6',
-  '200': '#b9e9ad',
-  '300': '#96dd85',
-  '350': '#85d672',
-  '400': '#74d05e',
-  '500': '#4EC437',
-  '525': '#4fbb33',
-  '600': '#419e2a',
-  '700': '#2f781e',
-  '800': '#1f5113',
-  '850': '#173d0d',
-  '900': '#0f2908',
-  '950': '#071404',
+  '50': '#e8f7f1',
+  '100': '#d3eee3',
+  '200': '#a7dec7',
+  '300': '#7cccab',
+  '350': '#66c49d',
+  '400': '#52ba90',
+  '500': '#28A878',
+  '525': '#269f6e',
+  '600': '#1e885c',
+  '700': '#166646',
+  '800': '#0e452f',
+  '850': '#0a3424',
+  '900': '#052316',
+  '950': '#02110b',
 };
 
 export const green: Color = (grade) =>

src/color/storyComponents.tsx

@@ -49,6 +49,8 @@ export function ColorStory(colorName, colorFn) {
 }
 
 export function ColorPalette({ color }) {
+  outputCache(color);
+
   return (
     <div
       style={{
@@ -72,6 +74,16 @@ export function ColorPalette({ color }) {
   );
 }
 
+function outputCache(color) {
+  const Cache = {};
+  [
+    50, 100, 200, 300, 350, 400, 500, 525, 600, 700, 800, 850, 900,
+    950,
+  ].map((grade) => (Cache[`${grade}`] = color(grade)));
+
+  console.log({ Cache });
+}
+
 // const titles = [
 //   'pressed',
 //   'selected',

src/tokens/color/color.story.tsx

@@ -3,6 +3,7 @@ export default { title: 'Tokens/color' };
 export { Tokens as Background } from './background/background.story';
 export { Tokens as Format } from './format/format.story';
 export { Tokens as Rainbow } from './rainbow/rainbow.story';
+export { Tokens as Livestream } from './livestream/livestream.story';
 export { Tokens as Status } from './status/status.story';
 export { Tokens as Stroke } from './stroke/stroke.story';
 export { Tokens as Surface } from './surface/surface.story';

src/tokens/color/index.ts

@@ -1,6 +1,7 @@
 import { background } from './background/background';
 import { format } from './format/format';
 import { rainbow } from './rainbow/rainbow';
+import { livestream } from './livestream/livestream';
 import { status } from './status/status';
 import { stroke } from './stroke/stroke';
 import { surface } from './surface/surface';
@@ -11,6 +12,7 @@ export const color = {
   background,
   format,
   rainbow,
+  livestream,
   status,
   stroke,
   surface,

src/tokens/color/livestream/livestream.story.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { css } from 'styled-components';
+import { readableColor } from 'polished';
+
+import { core } from '../../core';
+import { tx } from '../../util';
+import { Card, Canvas } from '../../storybook';
+
+import { Text } from '../../../typography';
+
+export function Tokens() {
+  return (
+    <Canvas>
+      <Card styles={styles}>
+        <Text>color-livestream</Text>
+      </Card>
+    </Canvas>
+  );
+}
+
+Tokens.storyName = 'livestream';
+
+function styles({ theme }) {
+  const background = tx(theme, core.color.livestream);
+  const color = readableColor(background);
+
+  return css`
+    background: ${background};
+
+    > span {
+      color: ${color};
+    }
+  `;
+}

src/tokens/color/livestream/livestream.ts

@@ -0,0 +1,12 @@
+import { Token, readToken } from '../../util';
+
+const dark = '#FF4D4D';
+const light = '#FF4D4D';
+
+const token: Token = {
+  default: 'light',
+  type: 'COLOR',
+  modes: { dark, light },
+};
+
+export const livestream = readToken(token);