From 585bf7d2941f99526cff713b15cf003f265fdbe1 Mon Sep 17 00:00:00 2001
From: catalin_covic <catalin.covic@gmail.com>
Date: Sun, 29 Mar 2020 14:28:26 -0700
Subject: [PATCH] update docs for css variable styling

---
 README.md                     |  1 +
 docs/js/sections/api.tsx      | 14 ++++++
 docs/js/sections/examples.tsx |  2 +-
 docs/js/sections/other.tsx    | 88 +++++++++++++++++++++++++++++++++--
 4 files changed, 100 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 41ac6e3..f0f055b 100644
--- a/README.md
+++ b/README.md
@@ -41,6 +41,7 @@ TODO
 - simple to use with many customizable options
 - smooth, beautiful animations with [react spring](https://www.react-spring.io)
 - typescript support
+- css variable support for custom styles
 
 ## Installation
 
diff --git a/docs/js/sections/api.tsx b/docs/js/sections/api.tsx
index f01beaf..3892742 100644
--- a/docs/js/sections/api.tsx
+++ b/docs/js/sections/api.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 
 import Text from '../components/text'
+import Link from '../components/link'
 import Code, { SYNTAX } from '../components/code'
 
 export default function Intro() {
@@ -156,6 +157,19 @@ export default function Intro() {
 			<div className="api__description">
 				<Text>Custom done button as render props. See below for example.</Text>
 			</div>
+
+			{/* custom styles */}
+			<h3 className="h3-api">
+				<code className="name">custom styling</code>
+			</h3>
+
+			<div className="api__description">
+				<Text>
+					<Link samePage href="#custom-styles">
+						See below for examples
+					</Link>
+				</Text>
+			</div>
 		</section>
 	)
 }
diff --git a/docs/js/sections/examples.tsx b/docs/js/sections/examples.tsx
index c3c5146..42d9f79 100644
--- a/docs/js/sections/examples.tsx
+++ b/docs/js/sections/examples.tsx
@@ -149,7 +149,7 @@ function YourComponent(){
 			</div>
 
 			{/* example 4 */}
-			<div className="examples__item">
+			<div className="examples__item foo">
 				<Text>Custom done button</Text>
 
 				<div className="examples__example-3">
diff --git a/docs/js/sections/other.tsx b/docs/js/sections/other.tsx
index bf007bf..469c2da 100644
--- a/docs/js/sections/other.tsx
+++ b/docs/js/sections/other.tsx
@@ -1,17 +1,97 @@
 import React from 'react'
 
 import Text from '../components/text'
+import Link from '../components/link'
 import Code, { SYNTAX } from '../components/code'
 
 export default function Other() {
 	return (
-		<section className="docs-section">
+		<section className="docs-section" id="custom-styles">
 			<h2>Custom styles</h2>
-
 			<div className="examples__item">
+				<Text>There are two ways of overriding/customizing styles:</Text>
+				<Text>
+					<strong>CSS variables:</strong> for changing basic styling - mainly text colors,
+					background colors, fonts, etc. See{' '}
+					<Link
+						samePage
+						href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"
+					>
+						using CSS variables
+					</Link>{' '}
+					for more info.
+				</Text>
+				<Code type={SYNTAX.css}>
+					{`// global override
+:root {
+	--meridiem-bg-color: green;
+	--meridiem-text-color: red;
+}
+
+// container specific
+.foo {
+	--meridiem-bg-color: green;
+	--meridiem-text-color: red;
+}
+`}
+				</Code>
+
+				<Text>The full list of supported variables are:</Text>
+				<Code type={SYNTAX.css}>
+					{`// main wrapper
+var(--main-box-shadow, 0 3px 11px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.15))
+var(--main-bg, white)
+var(--main-font-family, 'Roboto', sans-serif)
+
+// top bar
+var(--top-bg, white)
+var(--top-colon-color, #8C8C8C)
+var(--top-text-color, #8C8C8C)
+var(--top-selected-color, #8EDDFD)
+var(--top-meridiem-color, #8C8C8C)
+
+// time dropdown
+var(--dropdown-border, 1px solid #f4f4f4)
+var(--dropdown-shadow, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))
+var(--dropdown-text-color, #8c8c8c)
+var(--dropdown-hover-bg, #EAF8FF)
+
+// clock wrapper
+var(--clock-wrapper-bg, #f4f4f4);
+var(--clock-bg, white);
+
+// clock hand
+var(--hand-line-color, #bceaff);
+var(--hand-circle-center, #bceaff);
+var(--hand-circle-outer, #e6f7ff);
+var(--hand-minute-circle, #ade2fb); // minutes only, dot between intervals
+
+// numbers
+var(--numbers-text-color, #999);
+var(--numbers-font-size-reg, 16px); // 12h mode only
+var(--numbers-font-size-inner, 15px); // 24h mode only
+var(--numbers-font-size-outer, 13px); // 24h mode only
+
+
+// meridiem buttons
+var(--meridiem-bg-color, white);
+var(--meridiem-text-color, #898989);
+var(--meridiem-selected-bg-color, #E1EFF6);
+var(--meridiem-selected-text-color, #898989);
+
+// done button
+var(--done-bg-color, #f4f4f4);
+var(--done-text-color, #686868);
+var(--done-border-top, 1px solid #ccc);
+var(--done-font-size, 13px);
+var(--done-font-weight, 500);
+`}
+				</Code>
+
+				<hr />
 				<Text>
-					For changing colors, each element has a class name you can override properties
-					with 1 level of specifity.
+					<strong>Higher CSS specificity:</strong> for more control over css, each element
+					has a class name you can override properties with 1 level of specifity.
 				</Text>
 				<Code type={SYNTAX.css}>
 					{`// won't work because emotion will override your styles