From 8985bca520cf780ba27224c7764bb81ce60c89cb Mon Sep 17 00:00:00 2001
From: Adam Argyle <atom@argyleink.com>
Date: Wed, 29 Nov 2023 20:49:29 -0800
Subject: [PATCH] more detail

---
 docs/astro.config.mjs                   |  2 +-
 docs/src/content/docs/props/easings.mdx | 90 +++++++++++++++++--------
 docs/src/styles/starlight.overrides.css | 11 +--
 3 files changed, 70 insertions(+), 33 deletions(-)

diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 02b864a0..b6ee6743 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -16,7 +16,7 @@ export default defineConfig({
 			customCss: [
 				'../css/index.v2.css',
 				'./src/styles/demo-animations.css',
-				// './src/styles/starlight.overrides.css',
+				'./src/styles/starlight.overrides.css',
 			],
 			social: {
 				github: 'https://github.com/argyleink/open-props',
diff --git a/docs/src/content/docs/props/easings.mdx b/docs/src/content/docs/props/easings.mdx
index a6dc6612..b16ea1ac 100644
--- a/docs/src/content/docs/props/easings.mdx
+++ b/docs/src/content/docs/props/easings.mdx
@@ -23,23 +23,33 @@ A preview of what it looks like to use Open Props within a project.
 ```css ins="var(--ease-spring-3)" ins="var(--ease-out-5)"
 // component.css
 .card {
-	animation: twist 1s var(--ease-spring-3) infinite;
+	animation: fade-out .5 var(--ease-out-5) infinite;
 }
 
-.slide-fade-out {
-  animation:
-    var(--animation-fade-out) forwards,
-    var(--animation-slide-out-down);
-  animation-timing-function: var(--ease-out-5);
-  animation-duration: 1s;
+.button {
+  transition: transform .5s var(--ease-spring-3);
 }
 ```
 
-```js ins="Spring[3]"
+```js ins="Spring[3]" ins="EaseOut[5]"
 // component.js
-import {Spring} from 'open-props/easings.js';
-
-element.style.animationTimingFunction = Spring[3];
+import {Spring, EaseOut} from 'open-props/easings.js';
+
+card.style.animation = `fade-out .5s ${EaseOut[5]} infinite`;
+button.style.transitionTimingFunction = Spring[3];
+
+await Promise.all([
+	box1.animate([{ transform: 'scale(0)'}], {
+		duration: 500,
+		delay:0,
+		easing: Spring[3]
+	}).finished,
+	box2.animate([{ transform: 'scale(0)'}], {
+		duration: 500,
+		delay:100,
+		easing: Spring[3]
+	}).finished,
+])
 ```
 
 ### Importing
@@ -48,25 +58,49 @@ Get the props into your project via [NPM](https://www.npmjs.com/package/open-pro
 
 <Tabs>
 	<TabItem label="CSS">
-		```css
-		/* NPM */
-		@import 'open-props/easings.css';      
-
-		/* CDN */
-		@import 'https://unpkg.com/open-props/easings.css';
-		```
+		<div class="tighten">
+			**NPM**
+			```css
+			@import 'open-props/easings.css';      
+			```
+		</div>
+		<div class="tighten">
+			**CDN**
+			```css
+			@import 'https://unpkg.com/open-props/easings.css'; 
+			```
+		</div>
   </TabItem>
   <TabItem label="JS">
-		```js
-		 // NPM
-		import Easings from 'open-props/easings.js';
-
-		// CDN
-		import Easings from 'https://unpkg.com/open-props/easings.js';
-
-		// Choose specific subset
-		import {Ease, EaseIn, Spring, Bounce} from 'open-props/easings.js';
-		```
+		<div class="tighten">
+			**NPM**
+			```js
+			import Easings from 'open-props/easings.js';
+			```
+		</div>
+		<div class="tighten">
+			**CDN**
+			```js
+			import Easings from 'https://unpkg.com/open-props/easings.js';
+			```
+		</div>
+		<div class="tighten">
+			**Exports**
+			```js
+			export default {
+				Ease,
+				EaseIn,
+				EaseOut,
+				EaseInOut,
+				ElasticIn,
+				ElasticOut,
+				ElasticInOut,
+				Steps,
+				Spring,
+				Bounce,
+			}
+			```
+		</div>
 	</TabItem>
 </Tabs>
 
diff --git a/docs/src/styles/starlight.overrides.css b/docs/src/styles/starlight.overrides.css
index 1468a65a..e3c340ed 100644
--- a/docs/src/styles/starlight.overrides.css
+++ b/docs/src/styles/starlight.overrides.css
@@ -1,9 +1,8 @@
 /* Dark mode colors. */
-:root {
+/* :root {
 	--sl-color-accent-low: #131e4f;
 	--sl-color-accent: oklch(var(--palette-hue) 0.3 75%);
 	--sl-color-accent-high: #b3c7ff;
-	/* --sl-color-text-accent: oklch(var(--palette-hue) 0.3 75%); */
 
 	--sl-color-white: #ffffff;
 	--sl-color-gray-1: var(--color-2);
@@ -17,9 +16,9 @@
 
 	--sl-color-bg: var(--color-14);
 	--sl-color-bg-nav: var(--color-12);
-}
+} */
 /* Light mode colors. */
-:root[data-theme='light'] {
+/* :root[data-theme='light'] {
 	--sl-color-accent-low: #c7d6ff;
 	--sl-color-accent: oklch(var(--palette-hue) 0.3 85%);
 	--sl-color-accent-high: #182775;
@@ -54,4 +53,8 @@
 	--sl-shadow-sm: var(--shadow-1);
 	--sl-shadow-md: var(--shadow-2);
 	--sl-shadow-lg: var(--shadow-5);
+} */
+
+.tighten .expressive-code {
+	margin-top: 0.5rem;
 }