more detail

argyleink · Nov 30, 2023 · 8985bca · 8985bca
1 parent bec5fb7
commit 8985bca
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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;
 }