Deprecated Material Design colors, added TransitionV2 but did not integrate yet

Author: Zaydek Michels-Gualtieri

.eslintrc.js

@@ -1,4 +1,4 @@
-// https://github.com/codex-src/dot-eslintrc.js
+// https://github.com/codex-src/dot-eslintrc.js (2483dfa)
 module.exports = {
 	env: {
 		browser: true,
@@ -84,7 +84,7 @@ module.exports = {
 		"prefer-numeric-literals":          1, // disallow `parseInt()` and `Number.parseInt()` in favor of binary, octal, and hexadecimal literals
 		"prefer-object-spread":             1, // disallow using Object.assign with an object literal as the first argument and prefer the use of object spread instead.
 		"prefer-template":                  0, // require template literals instead of string concatenation
-		"quote-props":                      [1, "as-needed"], // require quotes around object literal property names
+		"quote-props":                      0, // require quotes around object literal property names
 		"quotes":                           1, // enforce the consistent use of either backticks, double, or single quotes
 		"rest-spread-spacing":              1, // enforce spacing between rest and spread operators and their expressions
 		"semi":                             [1, "never"], // require or disallow semicolons instead of ASI

.gitignore

@@ -8,4 +8,4 @@
 
 # Production
 /build
-*.generated.css
+tailwind.generated.css

src/Editor/Elements/Elements.js

@@ -170,7 +170,7 @@ export const TodoItem = React.memo(({ id, syntax, checked, children, dispatch })
 						ref={ref}
 						className={dedupeSpaces(`
 							form-checkbox
-							text-md-blue-a200
+							text-blue-500
 							border-none
 							rounded-md
 							shadow-hero
@@ -181,6 +181,8 @@ export const TodoItem = React.memo(({ id, syntax, checked, children, dispatch })
 							duration-150
 							cursor-pointer
 						`)}
+						// FIXME: Remove style={{ ... }}
+						style={{ color: "var(--blue-500)" }}
 						type="checkbox"
 						checked={checked}
 						onChange={() => {

src/Editor/Elements/InlineElements.js

@@ -43,23 +43,23 @@ export const StrongEmphasis = ({ syntax, children }) => (
 )
 
 export const Code = ({ syntax, children }) => (
-	<code className="px-1 py-px text-md-blue-a400 border rounded" {...attrs.disableAutoCorrect}>
+	<code className="px-1 py-px text-blue-500 border rounded" {...attrs.disableAutoCorrect}>
 		<Markdown syntax={syntax}>
 			{children}
 		</Markdown>
 	</code>
 )
 
 export const Strikethrough = ({ syntax, children }) => (
-	<strike className="line-through text-gray-500" style={{ "--md-blue-a400": "currentColor" }}>
+	<strike className="line-through text-gray-500" style={{ "--blue-500": "currentColor" }}>
 		<Markdown syntax={syntax}>
 			{children}
 		</Markdown>
 	</strike>
 )
 
 export const Anchor = ({ syntax, href, children }) => (
-	<a className="underline text-md-blue-a400" href={href} {...attrs.a}>
+	<a className="underline text-blue-500" href={href} {...attrs.a}>
 		<Markdown syntax={!children || syntax} {...attrs.disableAutoCorrect}>
 			{children || syntax}
 		</Markdown>

src/Editor/stylesheets/core.css

@@ -12,8 +12,8 @@
 }
 
 .codex-editor [aria-label][role="img"] {
-	vertical-align: -10%;
-	font-size: 120%;
+	vertical-align: -18.75%;
+	font-size: 137.5%;
 	line-height: 1;
 }
 
@@ -27,7 +27,7 @@
 	margin-left: -1.5em;
 	position: absolute;
 	content: "• ";
-	color: var(--md-blue-a400);
+	color: var(--blue-500);
 }
 
 .codex-editor [data-codex-ordered="true"]:first-of-type {
@@ -39,7 +39,7 @@
 	content: counter(count) ". ";
 	counter-increment: count;
 	font-feature-settings: "tnum";
-	color: var(--md-blue-a400);
+	color: var(--blue-500);
 }
 
 .codex-editor [data-codex-checked] input[type="checkbox"] {

src/Editor/stylesheets/theme.css

@@ -16,5 +16,5 @@
 }
 
 .codex-editor .markdown {
-	color: var(--md-blue-a400);
+	color: var(--blue-500);
 }

src/index.js

@@ -3,7 +3,6 @@ import React from "react"
 import ReactDOM from "react-dom"
 
 import "debug.css"
-import "stylesheets/material-design/color-vars.css"
 import "stylesheets/prism/custom.css"
 import "stylesheets/tailwind/color-vars.css"
 import "stylesheets/tailwind/em-context.css"

src/lib/TransitionV2.js

@@ -0,0 +1,41 @@
+import React from "react"
+
+const TransitionV2 = ({
+	on,
+	transition,
+	from,
+	to,
+	children,
+}) => {
+	const ref = React.useRef()
+
+	const transitionClasses = (transition || "").split(/\s+/)
+	const fromClasses = from.split(/\s+/)
+	const toClasses = to.split(/\s+/)
+
+	const mounted = React.useRef()
+	React.useLayoutEffect(() => {
+		const actualRef = children.ref || ref
+		if (!mounted.current && transitionClasses.length && transitionClasses[0]) { // Guards "".split(/\s+/) -> [""]
+			actualRef.current.classList.add(...transitionClasses)
+		}
+		if (!on) {
+			actualRef.current.classList.remove(...toClasses)
+			actualRef.current.classList.add(...fromClasses)
+		} else {
+			actualRef.current.classList.remove(...fromClasses)
+			actualRef.current.classList.add(...toClasses)
+		}
+	}, [
+		on,
+		children.ref,
+		ref,
+		transitionClasses,
+		fromClasses,
+		toClasses,
+	])
+
+	return !children.ref ? React.cloneElement(children, { ref }) : children
+}
+
+export default TransitionV2