added css variables to styles

src/components/ClockHand.tsx

@@ -14,10 +14,11 @@ import {
 	getClockHandLength,
 } from '../helpers/constants'
 import {
-	CLOCK_HAND_ARM as CLOCK_HAND_ARM_FILL,
-	CLOCK_HAND_CIRCLE_BACKGROUND,
-	CLOCK_HAND_INTERMEDIATE_CIRCLE_BACKGROUND,
-} from './styles/constants'
+	line as lineStyle,
+	outerCircle as outerCircleStyle,
+	centerCircle as centerCircleStyle,
+	intermediateMinuteCircle as intermediateMinuteCircleStyle,
+} from './styles/clock-hand'
 import { calcAnimationAngle } from '../helpers/math'
 
 interface Props {
@@ -101,11 +102,11 @@ export default function ClockHand({ mode, time }: Props) {
 	if (mode === MODE.MINUTES && value % 5) {
 		showIntermediateValueDisplay = (
 			<circle
+				className="react-timekeeper__hand-intermediate-circle"
+				css={intermediateMinuteCircleStyle}
 				cx={CLOCK_RADIUS}
 				cy={NUMBER_OUTER_POSITION}
 				r={4}
-				fill={CLOCK_HAND_INTERMEDIATE_CIRCLE_BACKGROUND}
-				className="react-timekeeper__hand-intermediate-circle"
 			/>
 		)
 	}
@@ -120,27 +121,27 @@ export default function ClockHand({ mode, time }: Props) {
 		>
 			<animated.g transform={rotation.interpolate((a) => rotate(a))}>
 				<animated.line
-					stroke={CLOCK_HAND_ARM_FILL}
+					className="react-timekeeper__clock-hand"
+					css={lineStyle}
 					x1={CLOCK_RADIUS}
 					y1={CLOCK_RADIUS}
 					x2={CLOCK_RADIUS}
 					y2={length}
 					strokeWidth="1"
-					className="react-timekeeper__clock-hand"
 				/>
 				<circle
+					className="react-timekeeper__hand-circle-center"
+					css={centerCircleStyle}
 					cx={CLOCK_RADIUS}
 					cy={CLOCK_RADIUS}
 					r={1.5}
-					fill={CLOCK_HAND_ARM_FILL}
-					className="react-timekeeper__hand-circle-center"
 				/>
 				<animated.circle
-					fill={CLOCK_HAND_CIRCLE_BACKGROUND}
+					className="react-timekeeper__hand-circle-outer"
+					css={outerCircleStyle}
 					cx={CLOCK_RADIUS}
 					cy={position}
 					r={circleRadius}
-					className="react-timekeeper__hand-circle-outer"
 				/>
 				{showIntermediateValueDisplay}
 			</animated.g>

src/components/styles/clock-hand.ts

@@ -0,0 +1,21 @@
+import { css, jsx } from '@emotion/core'
+
+const CLOCK_HAND_ARM = '#bceaff'
+const CLOCK_HAND_CIRCLE_BACKGROUND = '#e6f7ff'
+const CLOCK_HAND_INTERMEDIATE_CIRCLE_BACKGROUND = '#ade2fb'
+
+export const line = css`
+	stroke: var(--hand-line-color, ${CLOCK_HAND_ARM});
+`
+
+export const centerCircle = css`
+	fill: var(--hand-circle-center, ${CLOCK_HAND_ARM});
+`
+
+export const outerCircle = css`
+	fill: var(--hand-circle-outer, ${CLOCK_HAND_CIRCLE_BACKGROUND});
+`
+
+export const intermediateMinuteCircle = css`
+	fill: var(--hand-minute-circle, ${CLOCK_HAND_INTERMEDIATE_CIRCLE_BACKGROUND});
+`

src/components/styles/clock-wrapper.ts

@@ -4,7 +4,7 @@ import { CLOCK_WRAPPER_BACKGROUND } from './constants'
 const style = css`
 	text-align: center;
 	padding: 18px 0 14px;
-	background: ${CLOCK_WRAPPER_BACKGROUND};
+	background: var(--clock-wrapper-bg, ${CLOCK_WRAPPER_BACKGROUND});
 `
 
 export default style

src/components/styles/clock.ts

@@ -4,7 +4,7 @@ import { CLOCK_SIZE } from '../../helpers/constants'
 const styles = css`
 	display: inline-block;
 	border-radius: 200px;
-	background: white;
+	background: var(--clock-bg, white);
 	width: ${CLOCK_SIZE}px;
 	height: ${CLOCK_SIZE}px;
 	position: relative;

src/components/styles/constants.ts

@@ -1,7 +1,2 @@
 // clock wrapper
 export const CLOCK_WRAPPER_BACKGROUND = '#f4f4f4'
-
-// clock
-export const CLOCK_HAND_ARM = '#bceaff'
-export const CLOCK_HAND_CIRCLE_BACKGROUND = '#e6f7ff'
-export const CLOCK_HAND_INTERMEDIATE_CIRCLE_BACKGROUND = '#ade2fb'

src/components/styles/done-button.ts

@@ -5,18 +5,18 @@ export const DONE_BUTTON_COLOR = '#686868'
 export const DONE_BUTTON_BORDER_COLOR = '#CCC'
 
 const doneButton = css`
-	background: ${CLOCK_WRAPPER_BACKGROUND};
+	background: var(--done-bg-color, ${CLOCK_WRAPPER_BACKGROUND});
 	display: block;
-	color: ${DONE_BUTTON_COLOR};
+	color: var(--done-text-color, ${DONE_BUTTON_COLOR});
 	text-transform: uppercase;
-	border-top: 1px solid ${DONE_BUTTON_BORDER_COLOR};
+	border-top: var(--done-border-top, 1px solid ${DONE_BUTTON_BORDER_COLOR});
 	text-align: center;
 	cursor: pointer;
 	padding: 16px 0;
-	font-size: 13px;
+	font-size: var(--done-font-size, 13px);
 	letter-spacing: 0.5px;
 	line-height: normal;
-	font-weight: 500;
+	font-weight: var(--done-font-weight, 500);
 `
 
 export default doneButton

src/components/styles/main.ts

@@ -5,11 +5,15 @@ const timepicker = css`
 	-webkit-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 
-	font-family: 'Roboto', sans-serif;
-	background: white;
+	font-family: var(--main-font-family, 'Roboto', sans-serif);
+	background: var(--main-bg, white);
+	box-shadow: var(
+		--main-box-shadow,
+		0 3px 11px rgba(0, 0, 0, 0.1),
+		0 3px 6px rgba(0, 0, 0, 0.15)
+	);
 	border-radius: 3px;
 	display: inline-block;
-	box-shadow: 0 3px 11px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.15);
 	width: 260px;
 	position: relative;
 	user-select: none;

src/components/styles/meridiems.ts

@@ -24,14 +24,14 @@ const right = `
 `
 
 const selected = `
-	background: ${CLOCK_WRAPPER_MERIDIEM_BACKGROUND_COLOR_SELECTED};
-	color: ${CLOCK_WRAPPER_MERIDIEM_TEXT_COLOR_SELECTED};
+	background: var(--meridiem-selected-bg-color, ${CLOCK_WRAPPER_MERIDIEM_BACKGROUND_COLOR_SELECTED});
+	color: var(--meridiem-selected-text-color, ${CLOCK_WRAPPER_MERIDIEM_TEXT_COLOR_SELECTED});
 `
 
 export const meridiem = ({ isRight, isSelected }: Props) => css`
-	background: white;
+	background: var(--meridiem-bg-color, white);
 	font-size: 14px;
-	color: ${CLOCK_WRAPPER_MERIDIEM_COLOR};
+	color: var(--meridiem-text-color, ${CLOCK_WRAPPER_MERIDIEM_COLOR});
 	display: inline-block;
 	padding: 0;
 	cursor: pointer;

src/components/styles/numbers.ts

@@ -1,8 +1,22 @@
 import { css, jsx } from '@emotion/core'
-import { NUMBER_RADIUS_REGULAR, getFontSize } from '../../helpers/constants'
+import {
+	NUMBER_RADIUS_REGULAR,
+	NUMBER_REGULAR_FONT_SIZE,
+	HOUR_24_INNER_FONT_SIZE,
+	HOUR_24_OUTER_FONT_SIZE,
+} from '../../helpers/constants'
 
 const CLOCK_NUMBER_COLOR = '#999999'
 
+function getFontSize(hour24Mode: boolean, inner: boolean): string {
+	if (!hour24Mode) {
+		return `var(--numbers-font-size-reg, ${NUMBER_REGULAR_FONT_SIZE}px)`
+	}
+	return inner
+		? `var(--numbers-font-size-inner, ${HOUR_24_INNER_FONT_SIZE}px)`
+		: `var(--numbers-font-size-outer, ${HOUR_24_OUTER_FONT_SIZE}px)`
+}
+
 interface Props {
 	hour24Mode?: boolean
 	inner?: boolean
@@ -11,15 +25,15 @@ interface Props {
 export const numbersStyle = ({ hour24Mode = false, inner = false }: Props) => css`
 	display: inline-block;
 	position: absolute;
-	color: ${CLOCK_NUMBER_COLOR};
+	color: var(--numbers-text-color, ${CLOCK_NUMBER_COLOR});
 	pointer-events: none;
 	border-radius: 99px;
 	width: ${NUMBER_RADIUS_REGULAR}px;
 	height: ${NUMBER_RADIUS_REGULAR}px;
 	text-align: center;
 	line-height: ${NUMBER_RADIUS_REGULAR}px;
 	z-index: 5;
-	font-size: ${getFontSize(hour24Mode, inner)}px;
+	font-size: ${getFontSize(hour24Mode, inner)};
 `
 
 // z-index required to be on top of clockhand

src/components/styles/time-dropdown.ts

@@ -22,14 +22,18 @@ export const wrapper = (hour24Mode: boolean, mode: MODE) => css`
 	position: absolute;
 	display: inline-block;
 	background: white;
-	border: 1px solid ${DROPDOWN_BORDER};
+	border: var(--dropdown-border, 1px solid ${DROPDOWN_BORDER});
 	border-radius: 2px;
 	padding: 6px 0;
 	z-index: 20;
 	top: 62px;
 	height: 250px;
 	overflow-y: auto;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+	box-shadow: var(
+		--dropdown-shadow,
+		0 1px 3px rgba(0, 0, 0, 0.12),
+		0 1px 2px rgba(0, 0, 0, 0.24)
+	);
 	opacity: 0;
 	animation: ${fadeIn} 0.2s ease-out both;
 
@@ -48,10 +52,10 @@ export const option = (active: boolean) => css`
 	background: transparent;
 	padding: 7px 30px;
 	font-size: 16px;
-	color: ${DROPDOWN_COLOR};
+	color: var(--dropdown-text-color, ${DROPDOWN_COLOR});
 	cursor: pointer;
 	&:hover {
-		background: ${DROPDOWN_SELECTED_COLOR};
+		background: var(--dropdown-hover-bg, ${DROPDOWN_SELECTED_COLOR});
 	}
 	${active && selected}
 `

src/components/styles/top-bar.ts

@@ -4,7 +4,7 @@ const TIME_DEFAULT_COLOR = '#8C8C8C'
 const TIME_SELECTED_COLOR = '#8EDDFD'
 
 export const wrapper = (is24hr: boolean) => css`
-	background: white;
+	background: var(--top-bg, white);
 	padding: 14px 16px;
 	border-radius: 3px 3px 0 0;
 	position: relative;
@@ -31,7 +31,7 @@ export const minuteWrapper = (is24hr: boolean) => css`
 `
 
 export const colon = css`
-	color: ${TIME_DEFAULT_COLOR};
+	color: var(--top-colon-color, ${TIME_DEFAULT_COLOR});
 	font-weight: 500;
 	display: inline-block;
 	font-size: 46px;
@@ -48,12 +48,12 @@ const popInOut = keyframes`
 `
 
 const timeSelected = css`
-	color: ${TIME_SELECTED_COLOR};
+	color: var(--top-selected-color, ${TIME_SELECTED_COLOR});
 	animation: ${popInOut} 0.6s ease-out;
 `
 
 export const time = (isActive: boolean) => css`
-	color: ${TIME_DEFAULT_COLOR};
+	color: var(--top-text-color, ${TIME_DEFAULT_COLOR});
 	display: inline-block;
 	font-size: 48px;
 	cursor: pointer;
@@ -63,7 +63,7 @@ export const time = (isActive: boolean) => css`
 `
 
 export const meridiem = css`
-	color: ${TIME_DEFAULT_COLOR};
+	color: var(--top-meridiem-color, ${TIME_DEFAULT_COLOR});
 	display: inline-block;
 	font-size: 13px;
 	text-transform: uppercase;

src/helpers/constants.ts

@@ -60,15 +60,9 @@ export const CLOCK_SIZE = CLOCK_RADIUS * 2
 export const INNER_NUMBER_RADIUS = 77
 
 // font sizes
-const NUMBER_REGULAR_FONT_SIZE = 16
-const HOUR_24_INNER_FONT_SIZE = 15
-const HOUR_24_OUTER_FONT_SIZE = 13
-export function getFontSize(hour24Mode: boolean, inner: boolean): number {
-	if (!hour24Mode) {
-		return NUMBER_REGULAR_FONT_SIZE
-	}
-	return inner ? HOUR_24_INNER_FONT_SIZE : HOUR_24_OUTER_FONT_SIZE
-}
+export const NUMBER_REGULAR_FONT_SIZE = 16
+export const HOUR_24_INNER_FONT_SIZE = 15
+export const HOUR_24_OUTER_FONT_SIZE = 13
 
 // size of circle surrounding individual numbers
 // loosely based on font sizes above