more extras

extras/theme-animation.css

@@ -0,0 +1,112 @@
+
+/* todo: is there a better way to handle defining these animations? despite efforts,
+   this implementation still has some degree of transition stacking / delays in nested
+   svg contexts in chrome */
+
+/* BG Color Only */
+body[data-color-transition-enabled],
+body[data-color-transition-enabled] :is(
+	[data-bg-transition]:not([data-color-transition]):not([data-border-transition]),
+	button
+) {
+	transition: background linear .5s;
+}
+
+/* Border Color Only */
+body[data-color-transition-enabled] :is(
+	[data-border-transition]:not([data-bg-transition]):not([data-color-transition])
+) {
+	transition: border-color linear .5s;
+}
+
+/* Color Only */
+body[data-color-transition-enabled] :is(
+	[data-color-transition]:not([data-bg-transition]):not([data-border-transition]),
+	p,
+	a:not(h1 a),
+	span:not(p span),
+	time:not(p time),
+	li:not([role='doc-footnote']), dt, dd,
+	h1, h2, h3, h4, h5, h6,
+	td, th
+) {
+	transition: color linear .5s;
+}
+
+/* BG and Color */
+body[data-color-transition-enabled] :is(
+	[data-bg-transition][data-color-transition]:not([data-border-transition]),
+	pre,
+	code:not(pre code),
+	samp:not(pre samp),
+	mark,
+	[role='doc-footnote']
+) {
+	transition:
+		color linear .5s,
+		background linear .5s;
+}
+
+/* BG and Border */
+body[data-color-transition-enabled] :is(
+	[data-bg-transition][data-border-transition]:not([data-color-transition]),
+	#root > footer,
+	p.error-box,
+	.popup form,
+	#outline
+) {
+	transition:
+		background linear .5s,
+		border-color linear .5s;
+}
+
+/** Color and Border */
+body[data-color-transition-enabled] :is(
+	[data-color-transition][data-border-transition]:not([data-bg-transition]),
+	tbody tr,
+	.tbody .tr
+) {
+	transition:
+		color linear .5s,
+		border-color linear .5s;
+}
+
+/* BG, Color, and Border */
+body[data-color-transition-enabled] :is(
+	[data-bg-transition][data-border-transition][data-color-transition],
+	input, textarea, select,
+	blockquote,
+	:is(section, aside):is([role='note'], .info, .highlight, .warning, .problem)
+) {
+	transition:
+		color linear .5s,
+		background linear .5s,
+		border-color linear .5s;
+}
+
+/* Fill and Stroke */
+body[data-color-transition-enabled] svg :is(
+	[fill^='var('][stroke^='var(']:not([fill^='var('][stroke^='var('] *),
+	[style*='fill:'][style*='stroke:']:not([style*='fill:'][style*='stroke:'] *)
+) {
+	transition:
+		fill linear .5s,
+		stroke linear .5s;
+}
+
+/* Fill Only */
+body[data-color-transition-enabled] svg :is(
+	[fill^='var(']:not([stroke^='var(']):not([fill^='var('] *),
+	[style*='fill:']:not([style*='stroke:']):not([style*='fill:'] *)
+) {
+	transition: fill linear .5s;
+}
+
+/* Stroke Only */
+body[data-color-transition-enabled] :is(
+	svg [stroke^='var(']:not([fill^='var(']):not([stroke^='var('] *),
+	svg [style*='stroke:']:not([style*='fill:']):not([style*='stroke:'] *)
+	svg.icon
+ ) {
+	transition: stroke linear .5s;
+}