Add new game colors, handle radius

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gameflow-tv/flume",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "React implementation of the Flume design system",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -90,8 +90,8 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
     "storybook": "^6.3.6",
+    "styled-components": "^5.3.0",
     "ts-jest": "^27.0.4",
-    "typescript": "^4.3.5",
-    "styled-components": "^5.3.0"
+    "typescript": "^4.3.5"
   }
 }

src/lib/theme/colors.ts

@@ -30,6 +30,7 @@ export type Colors = {
   toggle: string
   onToggle: string
   card: string
+  shadow: string
 }
 
 const fallback: Colors = {
@@ -61,7 +62,8 @@ const fallback: Colors = {
   shimmerBackground: palette.black10,
   toggle: palette.codGray,
   onToggle: palette.white,
-  card: palette.emperorGray
+  card: palette.emperorGray,
+  shadow: palette.black20
 }
 
 export default fallback

src/lib/theme/palette.ts

@@ -4,9 +4,16 @@ const palette = {
   white: '#ffffff',
   black: '#000000',
   offWhite: '#eeeeee',
-  csgo: '#ed8914',
-  lol: '#3c46a2',
+  counterStrike: '#ed8914',
+  leagueOfLegends: '#3c46a2',
   dota: '#cc3c21',
+  valorant: '#ff4655',
+  rocketLeague: '#3983bb',
+  callOfDuty: '#bebebe',
+  overwatch: '#f99e1a',
+  rainbowSix: '#bcbcbc',
+  fifa: '#ddddde',
+  hearthstone: '#586b8e',
   punchRed: '#de3131',
   lightningYellow: '#f9c513',
   mustardYellow: '#735C0f',

src/lib/theme/shapes.ts

@@ -4,6 +4,7 @@ export type Borders = {
   medium: string
   pill: string
   full: string
+  handle: string
 }
 
 export type Shapes = {
@@ -16,7 +17,8 @@ const fallback: Shapes = {
     small: '4px',
     medium: '6px',
     pill: '100px',
-    full: '50%'
+    full: '50%',
+    handle: '0px 6px 0px 6px'
   }
 }