diff --git a/package.json b/package.json index 71e3a905..c4f18955 100644 --- a/package.json +++ b/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" } } diff --git a/src/lib/theme/colors.ts b/src/lib/theme/colors.ts index 1e23477f..4c97b07b 100644 --- a/src/lib/theme/colors.ts +++ b/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 diff --git a/src/lib/theme/palette.ts b/src/lib/theme/palette.ts index f35ec54c..19f8262d 100644 --- a/src/lib/theme/palette.ts +++ b/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', diff --git a/src/lib/theme/shapes.ts b/src/lib/theme/shapes.ts index c9e2f221..6179ed9d 100644 --- a/src/lib/theme/shapes.ts +++ b/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' } }