💄 feat: I am so fucking smart (rainbowify-text with --rainbow-text & fallback)

src/style/_mixins.scss

@@ -1,5 +1,6 @@
 @use 'sass:list';
 @use 'sass:math';
+@use 'sass:selector';
 @use 'theme';
 
 @mixin flow($space: 1em) {
@@ -12,9 +13,13 @@
   $colors-length: list.length(theme.$text-colors);
 
   @for $i from 1 through $colors-length {
-    :nth-child(#{$colors-length}n + #{$i} of #{$elem}) {
+    :nth-child(#{$colors-length}n + #{$i} of #{selector.parse($elem)}) {
       @each $prop in $props {
-        #{$prop}: list.nth(theme.$text-colors, $i);
+        @if $prop == --rainbow-text {
+          --rainbow-text: #{list.nth(theme.$text-colors, $i)};
+        } @else {
+          #{$prop}: var(--rainbow-text, #{list.nth(theme.$text-colors, $i)});
+        }
       }
     }
   }

src/style/components/_index.scss

@@ -8,6 +8,7 @@
 /* base elements */
 @forward 'base/Title';
 @forward 'base/Link';
+@forward 'base/List';
 
 /* page-specific components */
 @forward 'index/UpdateBox';

src/style/components/base/_List.scss

@@ -0,0 +1,7 @@
+@use '../../mixins';
+
+.List {
+
+}
+
+@include mixins.rainbowify-text('.List-item', --rainbow-text);