@fairgarden/design 0.1.0-0.canary.0

package/utils/scales.module.css

@@ -0,0 +1,1624 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+/*
+ * One class per scale per slot (§1.11.2). The scales layer sits above base,
+ * variants and compounds, so an explicit color prop beats any fallback.
+ * No mode logic: the Radix variables resolve to whatever mode is in effect.
+ * action<Scale> publishes a scope's action scale: Ground, and the overlay
+ * roots that declare their own scope, so a popup never inherits the root's.
+ * --secondary-light-mark: the light-scope mark on step 9, the scale's own
+ * contrast ink where it carries text, else `initial` so the role maps fall
+ * back to --primary12 (§1.4.7).
+ */
+@layer scales {
+  .primaryAmber {
+    --primary1: var(--amber1);
+    --primary2: var(--amber2);
+    --primary3: var(--amber3);
+    --primary4: var(--amber4);
+    --primary5: var(--amber5);
+    --primary6: var(--amber6);
+    --primary7: var(--amber7);
+    --primary8: var(--amber8);
+    --primary9: var(--amber9);
+    --primary10: var(--amber10);
+    --primary11: var(--amber11);
+    --primary12: var(--amber12);
+    --primary-contrast: var(--amber-contrast);
+    --primary-hover: var(--amber-hover);
+  }
+
+  .primaryBlue {
+    --primary1: var(--blue1);
+    --primary2: var(--blue2);
+    --primary3: var(--blue3);
+    --primary4: var(--blue4);
+    --primary5: var(--blue5);
+    --primary6: var(--blue6);
+    --primary7: var(--blue7);
+    --primary8: var(--blue8);
+    --primary9: var(--blue9);
+    --primary10: var(--blue10);
+    --primary11: var(--blue11);
+    --primary12: var(--blue12);
+    --primary-contrast: var(--blue-contrast);
+    --primary-hover: var(--blue-hover);
+  }
+
+  .primaryBronze {
+    --primary1: var(--bronze1);
+    --primary2: var(--bronze2);
+    --primary3: var(--bronze3);
+    --primary4: var(--bronze4);
+    --primary5: var(--bronze5);
+    --primary6: var(--bronze6);
+    --primary7: var(--bronze7);
+    --primary8: var(--bronze8);
+    --primary9: var(--bronze9);
+    --primary10: var(--bronze10);
+    --primary11: var(--bronze11);
+    --primary12: var(--bronze12);
+    --primary-contrast: var(--bronze-contrast);
+    --primary-hover: var(--bronze-hover);
+  }
+
+  .primaryBrown {
+    --primary1: var(--brown1);
+    --primary2: var(--brown2);
+    --primary3: var(--brown3);
+    --primary4: var(--brown4);
+    --primary5: var(--brown5);
+    --primary6: var(--brown6);
+    --primary7: var(--brown7);
+    --primary8: var(--brown8);
+    --primary9: var(--brown9);
+    --primary10: var(--brown10);
+    --primary11: var(--brown11);
+    --primary12: var(--brown12);
+    --primary-contrast: var(--brown-contrast);
+    --primary-hover: var(--brown-hover);
+  }
+
+  .primaryCrimson {
+    --primary1: var(--crimson1);
+    --primary2: var(--crimson2);
+    --primary3: var(--crimson3);
+    --primary4: var(--crimson4);
+    --primary5: var(--crimson5);
+    --primary6: var(--crimson6);
+    --primary7: var(--crimson7);
+    --primary8: var(--crimson8);
+    --primary9: var(--crimson9);
+    --primary10: var(--crimson10);
+    --primary11: var(--crimson11);
+    --primary12: var(--crimson12);
+    --primary-contrast: var(--crimson-contrast);
+    --primary-hover: var(--crimson-hover);
+  }
+
+  .primaryCyan {
+    --primary1: var(--cyan1);
+    --primary2: var(--cyan2);
+    --primary3: var(--cyan3);
+    --primary4: var(--cyan4);
+    --primary5: var(--cyan5);
+    --primary6: var(--cyan6);
+    --primary7: var(--cyan7);
+    --primary8: var(--cyan8);
+    --primary9: var(--cyan9);
+    --primary10: var(--cyan10);
+    --primary11: var(--cyan11);
+    --primary12: var(--cyan12);
+    --primary-contrast: var(--cyan-contrast);
+    --primary-hover: var(--cyan-hover);
+  }
+
+  .primaryGold {
+    --primary1: var(--gold1);
+    --primary2: var(--gold2);
+    --primary3: var(--gold3);
+    --primary4: var(--gold4);
+    --primary5: var(--gold5);
+    --primary6: var(--gold6);
+    --primary7: var(--gold7);
+    --primary8: var(--gold8);
+    --primary9: var(--gold9);
+    --primary10: var(--gold10);
+    --primary11: var(--gold11);
+    --primary12: var(--gold12);
+    --primary-contrast: var(--gold-contrast);
+    --primary-hover: var(--gold-hover);
+  }
+
+  .primaryGrass {
+    --primary1: var(--grass1);
+    --primary2: var(--grass2);
+    --primary3: var(--grass3);
+    --primary4: var(--grass4);
+    --primary5: var(--grass5);
+    --primary6: var(--grass6);
+    --primary7: var(--grass7);
+    --primary8: var(--grass8);
+    --primary9: var(--grass9);
+    --primary10: var(--grass10);
+    --primary11: var(--grass11);
+    --primary12: var(--grass12);
+    --primary-contrast: var(--grass-contrast);
+    --primary-hover: var(--grass-hover);
+  }
+
+  .primaryGray {
+    --primary1: var(--gray1);
+    --primary2: var(--gray2);
+    --primary3: var(--gray3);
+    --primary4: var(--gray4);
+    --primary5: var(--gray5);
+    --primary6: var(--gray6);
+    --primary7: var(--gray7);
+    --primary8: var(--gray8);
+    --primary9: var(--gray9);
+    --primary10: var(--gray10);
+    --primary11: var(--gray11);
+    --primary12: var(--gray12);
+    --primary-contrast: var(--gray-contrast);
+    --primary-hover: var(--gray-hover);
+  }
+
+  .primaryGreen {
+    --primary1: var(--green1);
+    --primary2: var(--green2);
+    --primary3: var(--green3);
+    --primary4: var(--green4);
+    --primary5: var(--green5);
+    --primary6: var(--green6);
+    --primary7: var(--green7);
+    --primary8: var(--green8);
+    --primary9: var(--green9);
+    --primary10: var(--green10);
+    --primary11: var(--green11);
+    --primary12: var(--green12);
+    --primary-contrast: var(--green-contrast);
+    --primary-hover: var(--green-hover);
+  }
+
+  .primaryIndigo {
+    --primary1: var(--indigo1);
+    --primary2: var(--indigo2);
+    --primary3: var(--indigo3);
+    --primary4: var(--indigo4);
+    --primary5: var(--indigo5);
+    --primary6: var(--indigo6);
+    --primary7: var(--indigo7);
+    --primary8: var(--indigo8);
+    --primary9: var(--indigo9);
+    --primary10: var(--indigo10);
+    --primary11: var(--indigo11);
+    --primary12: var(--indigo12);
+    --primary-contrast: var(--indigo-contrast);
+    --primary-hover: var(--indigo-hover);
+  }
+
+  .primaryIris {
+    --primary1: var(--iris1);
+    --primary2: var(--iris2);
+    --primary3: var(--iris3);
+    --primary4: var(--iris4);
+    --primary5: var(--iris5);
+    --primary6: var(--iris6);
+    --primary7: var(--iris7);
+    --primary8: var(--iris8);
+    --primary9: var(--iris9);
+    --primary10: var(--iris10);
+    --primary11: var(--iris11);
+    --primary12: var(--iris12);
+    --primary-contrast: var(--iris-contrast);
+    --primary-hover: var(--iris-hover);
+  }
+
+  .primaryJade {
+    --primary1: var(--jade1);
+    --primary2: var(--jade2);
+    --primary3: var(--jade3);
+    --primary4: var(--jade4);
+    --primary5: var(--jade5);
+    --primary6: var(--jade6);
+    --primary7: var(--jade7);
+    --primary8: var(--jade8);
+    --primary9: var(--jade9);
+    --primary10: var(--jade10);
+    --primary11: var(--jade11);
+    --primary12: var(--jade12);
+    --primary-contrast: var(--jade-contrast);
+    --primary-hover: var(--jade-hover);
+  }
+
+  .primaryLime {
+    --primary1: var(--lime1);
+    --primary2: var(--lime2);
+    --primary3: var(--lime3);
+    --primary4: var(--lime4);
+    --primary5: var(--lime5);
+    --primary6: var(--lime6);
+    --primary7: var(--lime7);
+    --primary8: var(--lime8);
+    --primary9: var(--lime9);
+    --primary10: var(--lime10);
+    --primary11: var(--lime11);
+    --primary12: var(--lime12);
+    --primary-contrast: var(--lime-contrast);
+    --primary-hover: var(--lime-hover);
+  }
+
+  .primaryMauve {
+    --primary1: var(--mauve1);
+    --primary2: var(--mauve2);
+    --primary3: var(--mauve3);
+    --primary4: var(--mauve4);
+    --primary5: var(--mauve5);
+    --primary6: var(--mauve6);
+    --primary7: var(--mauve7);
+    --primary8: var(--mauve8);
+    --primary9: var(--mauve9);
+    --primary10: var(--mauve10);
+    --primary11: var(--mauve11);
+    --primary12: var(--mauve12);
+    --primary-contrast: var(--mauve-contrast);
+    --primary-hover: var(--mauve-hover);
+  }
+
+  .primaryMint {
+    --primary1: var(--mint1);
+    --primary2: var(--mint2);
+    --primary3: var(--mint3);
+    --primary4: var(--mint4);
+    --primary5: var(--mint5);
+    --primary6: var(--mint6);
+    --primary7: var(--mint7);
+    --primary8: var(--mint8);
+    --primary9: var(--mint9);
+    --primary10: var(--mint10);
+    --primary11: var(--mint11);
+    --primary12: var(--mint12);
+    --primary-contrast: var(--mint-contrast);
+    --primary-hover: var(--mint-hover);
+  }
+
+  .primaryOlive {
+    --primary1: var(--olive1);
+    --primary2: var(--olive2);
+    --primary3: var(--olive3);
+    --primary4: var(--olive4);
+    --primary5: var(--olive5);
+    --primary6: var(--olive6);
+    --primary7: var(--olive7);
+    --primary8: var(--olive8);
+    --primary9: var(--olive9);
+    --primary10: var(--olive10);
+    --primary11: var(--olive11);
+    --primary12: var(--olive12);
+    --primary-contrast: var(--olive-contrast);
+    --primary-hover: var(--olive-hover);
+  }
+
+  .primaryOrange {
+    --primary1: var(--orange1);
+    --primary2: var(--orange2);
+    --primary3: var(--orange3);
+    --primary4: var(--orange4);
+    --primary5: var(--orange5);
+    --primary6: var(--orange6);
+    --primary7: var(--orange7);
+    --primary8: var(--orange8);
+    --primary9: var(--orange9);
+    --primary10: var(--orange10);
+    --primary11: var(--orange11);
+    --primary12: var(--orange12);
+    --primary-contrast: var(--orange-contrast);
+    --primary-hover: var(--orange-hover);
+  }
+
+  .primaryPink {
+    --primary1: var(--pink1);
+    --primary2: var(--pink2);
+    --primary3: var(--pink3);
+    --primary4: var(--pink4);
+    --primary5: var(--pink5);
+    --primary6: var(--pink6);
+    --primary7: var(--pink7);
+    --primary8: var(--pink8);
+    --primary9: var(--pink9);
+    --primary10: var(--pink10);
+    --primary11: var(--pink11);
+    --primary12: var(--pink12);
+    --primary-contrast: var(--pink-contrast);
+    --primary-hover: var(--pink-hover);
+  }
+
+  .primaryPlum {
+    --primary1: var(--plum1);
+    --primary2: var(--plum2);
+    --primary3: var(--plum3);
+    --primary4: var(--plum4);
+    --primary5: var(--plum5);
+    --primary6: var(--plum6);
+    --primary7: var(--plum7);
+    --primary8: var(--plum8);
+    --primary9: var(--plum9);
+    --primary10: var(--plum10);
+    --primary11: var(--plum11);
+    --primary12: var(--plum12);
+    --primary-contrast: var(--plum-contrast);
+    --primary-hover: var(--plum-hover);
+  }
+
+  .primaryPurple {
+    --primary1: var(--purple1);
+    --primary2: var(--purple2);
+    --primary3: var(--purple3);
+    --primary4: var(--purple4);
+    --primary5: var(--purple5);
+    --primary6: var(--purple6);
+    --primary7: var(--purple7);
+    --primary8: var(--purple8);
+    --primary9: var(--purple9);
+    --primary10: var(--purple10);
+    --primary11: var(--purple11);
+    --primary12: var(--purple12);
+    --primary-contrast: var(--purple-contrast);
+    --primary-hover: var(--purple-hover);
+  }
+
+  .primaryRed {
+    --primary1: var(--red1);
+    --primary2: var(--red2);
+    --primary3: var(--red3);
+    --primary4: var(--red4);
+    --primary5: var(--red5);
+    --primary6: var(--red6);
+    --primary7: var(--red7);
+    --primary8: var(--red8);
+    --primary9: var(--red9);
+    --primary10: var(--red10);
+    --primary11: var(--red11);
+    --primary12: var(--red12);
+    --primary-contrast: var(--red-contrast);
+    --primary-hover: var(--red-hover);
+  }
+
+  .primaryRuby {
+    --primary1: var(--ruby1);
+    --primary2: var(--ruby2);
+    --primary3: var(--ruby3);
+    --primary4: var(--ruby4);
+    --primary5: var(--ruby5);
+    --primary6: var(--ruby6);
+    --primary7: var(--ruby7);
+    --primary8: var(--ruby8);
+    --primary9: var(--ruby9);
+    --primary10: var(--ruby10);
+    --primary11: var(--ruby11);
+    --primary12: var(--ruby12);
+    --primary-contrast: var(--ruby-contrast);
+    --primary-hover: var(--ruby-hover);
+  }
+
+  .primarySage {
+    --primary1: var(--sage1);
+    --primary2: var(--sage2);
+    --primary3: var(--sage3);
+    --primary4: var(--sage4);
+    --primary5: var(--sage5);
+    --primary6: var(--sage6);
+    --primary7: var(--sage7);
+    --primary8: var(--sage8);
+    --primary9: var(--sage9);
+    --primary10: var(--sage10);
+    --primary11: var(--sage11);
+    --primary12: var(--sage12);
+    --primary-contrast: var(--sage-contrast);
+    --primary-hover: var(--sage-hover);
+  }
+
+  .primarySand {
+    --primary1: var(--sand1);
+    --primary2: var(--sand2);
+    --primary3: var(--sand3);
+    --primary4: var(--sand4);
+    --primary5: var(--sand5);
+    --primary6: var(--sand6);
+    --primary7: var(--sand7);
+    --primary8: var(--sand8);
+    --primary9: var(--sand9);
+    --primary10: var(--sand10);
+    --primary11: var(--sand11);
+    --primary12: var(--sand12);
+    --primary-contrast: var(--sand-contrast);
+    --primary-hover: var(--sand-hover);
+  }
+
+  .primarySky {
+    --primary1: var(--sky1);
+    --primary2: var(--sky2);
+    --primary3: var(--sky3);
+    --primary4: var(--sky4);
+    --primary5: var(--sky5);
+    --primary6: var(--sky6);
+    --primary7: var(--sky7);
+    --primary8: var(--sky8);
+    --primary9: var(--sky9);
+    --primary10: var(--sky10);
+    --primary11: var(--sky11);
+    --primary12: var(--sky12);
+    --primary-contrast: var(--sky-contrast);
+    --primary-hover: var(--sky-hover);
+  }
+
+  .primarySlate {
+    --primary1: var(--slate1);
+    --primary2: var(--slate2);
+    --primary3: var(--slate3);
+    --primary4: var(--slate4);
+    --primary5: var(--slate5);
+    --primary6: var(--slate6);
+    --primary7: var(--slate7);
+    --primary8: var(--slate8);
+    --primary9: var(--slate9);
+    --primary10: var(--slate10);
+    --primary11: var(--slate11);
+    --primary12: var(--slate12);
+    --primary-contrast: var(--slate-contrast);
+    --primary-hover: var(--slate-hover);
+  }
+
+  .primaryTeal {
+    --primary1: var(--teal1);
+    --primary2: var(--teal2);
+    --primary3: var(--teal3);
+    --primary4: var(--teal4);
+    --primary5: var(--teal5);
+    --primary6: var(--teal6);
+    --primary7: var(--teal7);
+    --primary8: var(--teal8);
+    --primary9: var(--teal9);
+    --primary10: var(--teal10);
+    --primary11: var(--teal11);
+    --primary12: var(--teal12);
+    --primary-contrast: var(--teal-contrast);
+    --primary-hover: var(--teal-hover);
+  }
+
+  .primaryTomato {
+    --primary1: var(--tomato1);
+    --primary2: var(--tomato2);
+    --primary3: var(--tomato3);
+    --primary4: var(--tomato4);
+    --primary5: var(--tomato5);
+    --primary6: var(--tomato6);
+    --primary7: var(--tomato7);
+    --primary8: var(--tomato8);
+    --primary9: var(--tomato9);
+    --primary10: var(--tomato10);
+    --primary11: var(--tomato11);
+    --primary12: var(--tomato12);
+    --primary-contrast: var(--tomato-contrast);
+    --primary-hover: var(--tomato-hover);
+  }
+
+  .primaryViolet {
+    --primary1: var(--violet1);
+    --primary2: var(--violet2);
+    --primary3: var(--violet3);
+    --primary4: var(--violet4);
+    --primary5: var(--violet5);
+    --primary6: var(--violet6);
+    --primary7: var(--violet7);
+    --primary8: var(--violet8);
+    --primary9: var(--violet9);
+    --primary10: var(--violet10);
+    --primary11: var(--violet11);
+    --primary12: var(--violet12);
+    --primary-contrast: var(--violet-contrast);
+    --primary-hover: var(--violet-hover);
+  }
+
+  .primaryYellow {
+    --primary1: var(--yellow1);
+    --primary2: var(--yellow2);
+    --primary3: var(--yellow3);
+    --primary4: var(--yellow4);
+    --primary5: var(--yellow5);
+    --primary6: var(--yellow6);
+    --primary7: var(--yellow7);
+    --primary8: var(--yellow8);
+    --primary9: var(--yellow9);
+    --primary10: var(--yellow10);
+    --primary11: var(--yellow11);
+    --primary12: var(--yellow12);
+    --primary-contrast: var(--yellow-contrast);
+    --primary-hover: var(--yellow-hover);
+  }
+
+  .secondaryAmber {
+    --secondary1: var(--amber1);
+    --secondary2: var(--amber2);
+    --secondary3: var(--amber3);
+    --secondary4: var(--amber4);
+    --secondary5: var(--amber5);
+    --secondary6: var(--amber6);
+    --secondary7: var(--amber7);
+    --secondary8: var(--amber8);
+    --secondary9: var(--amber9);
+    --secondary10: var(--amber10);
+    --secondary11: var(--amber11);
+    --secondary12: var(--amber12);
+    --secondary-contrast: var(--amber-contrast);
+    --secondary-hover: var(--amber-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondaryBlue {
+    --secondary1: var(--blue1);
+    --secondary2: var(--blue2);
+    --secondary3: var(--blue3);
+    --secondary4: var(--blue4);
+    --secondary5: var(--blue5);
+    --secondary6: var(--blue6);
+    --secondary7: var(--blue7);
+    --secondary8: var(--blue8);
+    --secondary9: var(--blue9);
+    --secondary10: var(--blue10);
+    --secondary11: var(--blue11);
+    --secondary12: var(--blue12);
+    --secondary-contrast: var(--blue-contrast);
+    --secondary-hover: var(--blue-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondaryBronze {
+    --secondary1: var(--bronze1);
+    --secondary2: var(--bronze2);
+    --secondary3: var(--bronze3);
+    --secondary4: var(--bronze4);
+    --secondary5: var(--bronze5);
+    --secondary6: var(--bronze6);
+    --secondary7: var(--bronze7);
+    --secondary8: var(--bronze8);
+    --secondary9: var(--bronze9);
+    --secondary10: var(--bronze10);
+    --secondary11: var(--bronze11);
+    --secondary12: var(--bronze12);
+    --secondary-contrast: var(--bronze-contrast);
+    --secondary-hover: var(--bronze-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondaryBrown {
+    --secondary1: var(--brown1);
+    --secondary2: var(--brown2);
+    --secondary3: var(--brown3);
+    --secondary4: var(--brown4);
+    --secondary5: var(--brown5);
+    --secondary6: var(--brown6);
+    --secondary7: var(--brown7);
+    --secondary8: var(--brown8);
+    --secondary9: var(--brown9);
+    --secondary10: var(--brown10);
+    --secondary11: var(--brown11);
+    --secondary12: var(--brown12);
+    --secondary-contrast: var(--brown-contrast);
+    --secondary-hover: var(--brown-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondaryCrimson {
+    --secondary1: var(--crimson1);
+    --secondary2: var(--crimson2);
+    --secondary3: var(--crimson3);
+    --secondary4: var(--crimson4);
+    --secondary5: var(--crimson5);
+    --secondary6: var(--crimson6);
+    --secondary7: var(--crimson7);
+    --secondary8: var(--crimson8);
+    --secondary9: var(--crimson9);
+    --secondary10: var(--crimson10);
+    --secondary11: var(--crimson11);
+    --secondary12: var(--crimson12);
+    --secondary-contrast: var(--crimson-contrast);
+    --secondary-hover: var(--crimson-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondaryCyan {
+    --secondary1: var(--cyan1);
+    --secondary2: var(--cyan2);
+    --secondary3: var(--cyan3);
+    --secondary4: var(--cyan4);
+    --secondary5: var(--cyan5);
+    --secondary6: var(--cyan6);
+    --secondary7: var(--cyan7);
+    --secondary8: var(--cyan8);
+    --secondary9: var(--cyan9);
+    --secondary10: var(--cyan10);
+    --secondary11: var(--cyan11);
+    --secondary12: var(--cyan12);
+    --secondary-contrast: var(--cyan-contrast);
+    --secondary-hover: var(--cyan-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondaryGold {
+    --secondary1: var(--gold1);
+    --secondary2: var(--gold2);
+    --secondary3: var(--gold3);
+    --secondary4: var(--gold4);
+    --secondary5: var(--gold5);
+    --secondary6: var(--gold6);
+    --secondary7: var(--gold7);
+    --secondary8: var(--gold8);
+    --secondary9: var(--gold9);
+    --secondary10: var(--gold10);
+    --secondary11: var(--gold11);
+    --secondary12: var(--gold12);
+    --secondary-contrast: var(--gold-contrast);
+    --secondary-hover: var(--gold-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondaryGrass {
+    --secondary1: var(--grass1);
+    --secondary2: var(--grass2);
+    --secondary3: var(--grass3);
+    --secondary4: var(--grass4);
+    --secondary5: var(--grass5);
+    --secondary6: var(--grass6);
+    --secondary7: var(--grass7);
+    --secondary8: var(--grass8);
+    --secondary9: var(--grass9);
+    --secondary10: var(--grass10);
+    --secondary11: var(--grass11);
+    --secondary12: var(--grass12);
+    --secondary-contrast: var(--grass-contrast);
+    --secondary-hover: var(--grass-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondaryGray {
+    --secondary1: var(--gray1);
+    --secondary2: var(--gray2);
+    --secondary3: var(--gray3);
+    --secondary4: var(--gray4);
+    --secondary5: var(--gray5);
+    --secondary6: var(--gray6);
+    --secondary7: var(--gray7);
+    --secondary8: var(--gray8);
+    --secondary9: var(--gray9);
+    --secondary10: var(--gray10);
+    --secondary11: var(--gray11);
+    --secondary12: var(--gray12);
+    --secondary-contrast: var(--gray-contrast);
+    --secondary-hover: var(--gray-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondaryGreen {
+    --secondary1: var(--green1);
+    --secondary2: var(--green2);
+    --secondary3: var(--green3);
+    --secondary4: var(--green4);
+    --secondary5: var(--green5);
+    --secondary6: var(--green6);
+    --secondary7: var(--green7);
+    --secondary8: var(--green8);
+    --secondary9: var(--green9);
+    --secondary10: var(--green10);
+    --secondary11: var(--green11);
+    --secondary12: var(--green12);
+    --secondary-contrast: var(--green-contrast);
+    --secondary-hover: var(--green-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondaryIndigo {
+    --secondary1: var(--indigo1);
+    --secondary2: var(--indigo2);
+    --secondary3: var(--indigo3);
+    --secondary4: var(--indigo4);
+    --secondary5: var(--indigo5);
+    --secondary6: var(--indigo6);
+    --secondary7: var(--indigo7);
+    --secondary8: var(--indigo8);
+    --secondary9: var(--indigo9);
+    --secondary10: var(--indigo10);
+    --secondary11: var(--indigo11);
+    --secondary12: var(--indigo12);
+    --secondary-contrast: var(--indigo-contrast);
+    --secondary-hover: var(--indigo-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondaryIris {
+    --secondary1: var(--iris1);
+    --secondary2: var(--iris2);
+    --secondary3: var(--iris3);
+    --secondary4: var(--iris4);
+    --secondary5: var(--iris5);
+    --secondary6: var(--iris6);
+    --secondary7: var(--iris7);
+    --secondary8: var(--iris8);
+    --secondary9: var(--iris9);
+    --secondary10: var(--iris10);
+    --secondary11: var(--iris11);
+    --secondary12: var(--iris12);
+    --secondary-contrast: var(--iris-contrast);
+    --secondary-hover: var(--iris-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondaryJade {
+    --secondary1: var(--jade1);
+    --secondary2: var(--jade2);
+    --secondary3: var(--jade3);
+    --secondary4: var(--jade4);
+    --secondary5: var(--jade5);
+    --secondary6: var(--jade6);
+    --secondary7: var(--jade7);
+    --secondary8: var(--jade8);
+    --secondary9: var(--jade9);
+    --secondary10: var(--jade10);
+    --secondary11: var(--jade11);
+    --secondary12: var(--jade12);
+    --secondary-contrast: var(--jade-contrast);
+    --secondary-hover: var(--jade-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondaryLime {
+    --secondary1: var(--lime1);
+    --secondary2: var(--lime2);
+    --secondary3: var(--lime3);
+    --secondary4: var(--lime4);
+    --secondary5: var(--lime5);
+    --secondary6: var(--lime6);
+    --secondary7: var(--lime7);
+    --secondary8: var(--lime8);
+    --secondary9: var(--lime9);
+    --secondary10: var(--lime10);
+    --secondary11: var(--lime11);
+    --secondary12: var(--lime12);
+    --secondary-contrast: var(--lime-contrast);
+    --secondary-hover: var(--lime-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondaryMauve {
+    --secondary1: var(--mauve1);
+    --secondary2: var(--mauve2);
+    --secondary3: var(--mauve3);
+    --secondary4: var(--mauve4);
+    --secondary5: var(--mauve5);
+    --secondary6: var(--mauve6);
+    --secondary7: var(--mauve7);
+    --secondary8: var(--mauve8);
+    --secondary9: var(--mauve9);
+    --secondary10: var(--mauve10);
+    --secondary11: var(--mauve11);
+    --secondary12: var(--mauve12);
+    --secondary-contrast: var(--mauve-contrast);
+    --secondary-hover: var(--mauve-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondaryMint {
+    --secondary1: var(--mint1);
+    --secondary2: var(--mint2);
+    --secondary3: var(--mint3);
+    --secondary4: var(--mint4);
+    --secondary5: var(--mint5);
+    --secondary6: var(--mint6);
+    --secondary7: var(--mint7);
+    --secondary8: var(--mint8);
+    --secondary9: var(--mint9);
+    --secondary10: var(--mint10);
+    --secondary11: var(--mint11);
+    --secondary12: var(--mint12);
+    --secondary-contrast: var(--mint-contrast);
+    --secondary-hover: var(--mint-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondaryOlive {
+    --secondary1: var(--olive1);
+    --secondary2: var(--olive2);
+    --secondary3: var(--olive3);
+    --secondary4: var(--olive4);
+    --secondary5: var(--olive5);
+    --secondary6: var(--olive6);
+    --secondary7: var(--olive7);
+    --secondary8: var(--olive8);
+    --secondary9: var(--olive9);
+    --secondary10: var(--olive10);
+    --secondary11: var(--olive11);
+    --secondary12: var(--olive12);
+    --secondary-contrast: var(--olive-contrast);
+    --secondary-hover: var(--olive-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondaryOrange {
+    --secondary1: var(--orange1);
+    --secondary2: var(--orange2);
+    --secondary3: var(--orange3);
+    --secondary4: var(--orange4);
+    --secondary5: var(--orange5);
+    --secondary6: var(--orange6);
+    --secondary7: var(--orange7);
+    --secondary8: var(--orange8);
+    --secondary9: var(--orange9);
+    --secondary10: var(--orange10);
+    --secondary11: var(--orange11);
+    --secondary12: var(--orange12);
+    --secondary-contrast: var(--orange-contrast);
+    --secondary-hover: var(--orange-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondaryPink {
+    --secondary1: var(--pink1);
+    --secondary2: var(--pink2);
+    --secondary3: var(--pink3);
+    --secondary4: var(--pink4);
+    --secondary5: var(--pink5);
+    --secondary6: var(--pink6);
+    --secondary7: var(--pink7);
+    --secondary8: var(--pink8);
+    --secondary9: var(--pink9);
+    --secondary10: var(--pink10);
+    --secondary11: var(--pink11);
+    --secondary12: var(--pink12);
+    --secondary-contrast: var(--pink-contrast);
+    --secondary-hover: var(--pink-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondaryPlum {
+    --secondary1: var(--plum1);
+    --secondary2: var(--plum2);
+    --secondary3: var(--plum3);
+    --secondary4: var(--plum4);
+    --secondary5: var(--plum5);
+    --secondary6: var(--plum6);
+    --secondary7: var(--plum7);
+    --secondary8: var(--plum8);
+    --secondary9: var(--plum9);
+    --secondary10: var(--plum10);
+    --secondary11: var(--plum11);
+    --secondary12: var(--plum12);
+    --secondary-contrast: var(--plum-contrast);
+    --secondary-hover: var(--plum-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondaryPurple {
+    --secondary1: var(--purple1);
+    --secondary2: var(--purple2);
+    --secondary3: var(--purple3);
+    --secondary4: var(--purple4);
+    --secondary5: var(--purple5);
+    --secondary6: var(--purple6);
+    --secondary7: var(--purple7);
+    --secondary8: var(--purple8);
+    --secondary9: var(--purple9);
+    --secondary10: var(--purple10);
+    --secondary11: var(--purple11);
+    --secondary12: var(--purple12);
+    --secondary-contrast: var(--purple-contrast);
+    --secondary-hover: var(--purple-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondaryRed {
+    --secondary1: var(--red1);
+    --secondary2: var(--red2);
+    --secondary3: var(--red3);
+    --secondary4: var(--red4);
+    --secondary5: var(--red5);
+    --secondary6: var(--red6);
+    --secondary7: var(--red7);
+    --secondary8: var(--red8);
+    --secondary9: var(--red9);
+    --secondary10: var(--red10);
+    --secondary11: var(--red11);
+    --secondary12: var(--red12);
+    --secondary-contrast: var(--red-contrast);
+    --secondary-hover: var(--red-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondaryRuby {
+    --secondary1: var(--ruby1);
+    --secondary2: var(--ruby2);
+    --secondary3: var(--ruby3);
+    --secondary4: var(--ruby4);
+    --secondary5: var(--ruby5);
+    --secondary6: var(--ruby6);
+    --secondary7: var(--ruby7);
+    --secondary8: var(--ruby8);
+    --secondary9: var(--ruby9);
+    --secondary10: var(--ruby10);
+    --secondary11: var(--ruby11);
+    --secondary12: var(--ruby12);
+    --secondary-contrast: var(--ruby-contrast);
+    --secondary-hover: var(--ruby-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondarySage {
+    --secondary1: var(--sage1);
+    --secondary2: var(--sage2);
+    --secondary3: var(--sage3);
+    --secondary4: var(--sage4);
+    --secondary5: var(--sage5);
+    --secondary6: var(--sage6);
+    --secondary7: var(--sage7);
+    --secondary8: var(--sage8);
+    --secondary9: var(--sage9);
+    --secondary10: var(--sage10);
+    --secondary11: var(--sage11);
+    --secondary12: var(--sage12);
+    --secondary-contrast: var(--sage-contrast);
+    --secondary-hover: var(--sage-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondarySand {
+    --secondary1: var(--sand1);
+    --secondary2: var(--sand2);
+    --secondary3: var(--sand3);
+    --secondary4: var(--sand4);
+    --secondary5: var(--sand5);
+    --secondary6: var(--sand6);
+    --secondary7: var(--sand7);
+    --secondary8: var(--sand8);
+    --secondary9: var(--sand9);
+    --secondary10: var(--sand10);
+    --secondary11: var(--sand11);
+    --secondary12: var(--sand12);
+    --secondary-contrast: var(--sand-contrast);
+    --secondary-hover: var(--sand-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondarySky {
+    --secondary1: var(--sky1);
+    --secondary2: var(--sky2);
+    --secondary3: var(--sky3);
+    --secondary4: var(--sky4);
+    --secondary5: var(--sky5);
+    --secondary6: var(--sky6);
+    --secondary7: var(--sky7);
+    --secondary8: var(--sky8);
+    --secondary9: var(--sky9);
+    --secondary10: var(--sky10);
+    --secondary11: var(--sky11);
+    --secondary12: var(--sky12);
+    --secondary-contrast: var(--sky-contrast);
+    --secondary-hover: var(--sky-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondarySlate {
+    --secondary1: var(--slate1);
+    --secondary2: var(--slate2);
+    --secondary3: var(--slate3);
+    --secondary4: var(--slate4);
+    --secondary5: var(--slate5);
+    --secondary6: var(--slate6);
+    --secondary7: var(--slate7);
+    --secondary8: var(--slate8);
+    --secondary9: var(--slate9);
+    --secondary10: var(--slate10);
+    --secondary11: var(--slate11);
+    --secondary12: var(--slate12);
+    --secondary-contrast: var(--slate-contrast);
+    --secondary-hover: var(--slate-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondaryTeal {
+    --secondary1: var(--teal1);
+    --secondary2: var(--teal2);
+    --secondary3: var(--teal3);
+    --secondary4: var(--teal4);
+    --secondary5: var(--teal5);
+    --secondary6: var(--teal6);
+    --secondary7: var(--teal7);
+    --secondary8: var(--teal8);
+    --secondary9: var(--teal9);
+    --secondary10: var(--teal10);
+    --secondary11: var(--teal11);
+    --secondary12: var(--teal12);
+    --secondary-contrast: var(--teal-contrast);
+    --secondary-hover: var(--teal-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondaryTomato {
+    --secondary1: var(--tomato1);
+    --secondary2: var(--tomato2);
+    --secondary3: var(--tomato3);
+    --secondary4: var(--tomato4);
+    --secondary5: var(--tomato5);
+    --secondary6: var(--tomato6);
+    --secondary7: var(--tomato7);
+    --secondary8: var(--tomato8);
+    --secondary9: var(--tomato9);
+    --secondary10: var(--tomato10);
+    --secondary11: var(--tomato11);
+    --secondary12: var(--tomato12);
+    --secondary-contrast: var(--tomato-contrast);
+    --secondary-hover: var(--tomato-hover);
+    --secondary-light-mark: initial;
+  }
+
+  .secondaryViolet {
+    --secondary1: var(--violet1);
+    --secondary2: var(--violet2);
+    --secondary3: var(--violet3);
+    --secondary4: var(--violet4);
+    --secondary5: var(--violet5);
+    --secondary6: var(--violet6);
+    --secondary7: var(--violet7);
+    --secondary8: var(--violet8);
+    --secondary9: var(--violet9);
+    --secondary10: var(--violet10);
+    --secondary11: var(--violet11);
+    --secondary12: var(--violet12);
+    --secondary-contrast: var(--violet-contrast);
+    --secondary-hover: var(--violet-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .secondaryYellow {
+    --secondary1: var(--yellow1);
+    --secondary2: var(--yellow2);
+    --secondary3: var(--yellow3);
+    --secondary4: var(--yellow4);
+    --secondary5: var(--yellow5);
+    --secondary6: var(--yellow6);
+    --secondary7: var(--yellow7);
+    --secondary8: var(--yellow8);
+    --secondary9: var(--yellow9);
+    --secondary10: var(--yellow10);
+    --secondary11: var(--yellow11);
+    --secondary12: var(--yellow12);
+    --secondary-contrast: var(--yellow-contrast);
+    --secondary-hover: var(--yellow-hover);
+    --secondary-light-mark: var(--secondary-contrast);
+  }
+
+  .actionAmber {
+    --action1: var(--amber1);
+    --action2: var(--amber2);
+    --action3: var(--amber3);
+    --action4: var(--amber4);
+    --action5: var(--amber5);
+    --action6: var(--amber6);
+    --action7: var(--amber7);
+    --action8: var(--amber8);
+    --action9: var(--amber9);
+    --action10: var(--amber10);
+    --action11: var(--amber11);
+    --action12: var(--amber12);
+    --action-contrast: var(--amber-contrast);
+    --action-hover: var(--amber-hover);
+  }
+
+  .actionBlue {
+    --action1: var(--blue1);
+    --action2: var(--blue2);
+    --action3: var(--blue3);
+    --action4: var(--blue4);
+    --action5: var(--blue5);
+    --action6: var(--blue6);
+    --action7: var(--blue7);
+    --action8: var(--blue8);
+    --action9: var(--blue9);
+    --action10: var(--blue10);
+    --action11: var(--blue11);
+    --action12: var(--blue12);
+    --action-contrast: var(--blue-contrast);
+    --action-hover: var(--blue-hover);
+  }
+
+  .actionBronze {
+    --action1: var(--bronze1);
+    --action2: var(--bronze2);
+    --action3: var(--bronze3);
+    --action4: var(--bronze4);
+    --action5: var(--bronze5);
+    --action6: var(--bronze6);
+    --action7: var(--bronze7);
+    --action8: var(--bronze8);
+    --action9: var(--bronze9);
+    --action10: var(--bronze10);
+    --action11: var(--bronze11);
+    --action12: var(--bronze12);
+    --action-contrast: var(--bronze-contrast);
+    --action-hover: var(--bronze-hover);
+  }
+
+  .actionBrown {
+    --action1: var(--brown1);
+    --action2: var(--brown2);
+    --action3: var(--brown3);
+    --action4: var(--brown4);
+    --action5: var(--brown5);
+    --action6: var(--brown6);
+    --action7: var(--brown7);
+    --action8: var(--brown8);
+    --action9: var(--brown9);
+    --action10: var(--brown10);
+    --action11: var(--brown11);
+    --action12: var(--brown12);
+    --action-contrast: var(--brown-contrast);
+    --action-hover: var(--brown-hover);
+  }
+
+  .actionCrimson {
+    --action1: var(--crimson1);
+    --action2: var(--crimson2);
+    --action3: var(--crimson3);
+    --action4: var(--crimson4);
+    --action5: var(--crimson5);
+    --action6: var(--crimson6);
+    --action7: var(--crimson7);
+    --action8: var(--crimson8);
+    --action9: var(--crimson9);
+    --action10: var(--crimson10);
+    --action11: var(--crimson11);
+    --action12: var(--crimson12);
+    --action-contrast: var(--crimson-contrast);
+    --action-hover: var(--crimson-hover);
+  }
+
+  .actionCyan {
+    --action1: var(--cyan1);
+    --action2: var(--cyan2);
+    --action3: var(--cyan3);
+    --action4: var(--cyan4);
+    --action5: var(--cyan5);
+    --action6: var(--cyan6);
+    --action7: var(--cyan7);
+    --action8: var(--cyan8);
+    --action9: var(--cyan9);
+    --action10: var(--cyan10);
+    --action11: var(--cyan11);
+    --action12: var(--cyan12);
+    --action-contrast: var(--cyan-contrast);
+    --action-hover: var(--cyan-hover);
+  }
+
+  .actionGold {
+    --action1: var(--gold1);
+    --action2: var(--gold2);
+    --action3: var(--gold3);
+    --action4: var(--gold4);
+    --action5: var(--gold5);
+    --action6: var(--gold6);
+    --action7: var(--gold7);
+    --action8: var(--gold8);
+    --action9: var(--gold9);
+    --action10: var(--gold10);
+    --action11: var(--gold11);
+    --action12: var(--gold12);
+    --action-contrast: var(--gold-contrast);
+    --action-hover: var(--gold-hover);
+  }
+
+  .actionGrass {
+    --action1: var(--grass1);
+    --action2: var(--grass2);
+    --action3: var(--grass3);
+    --action4: var(--grass4);
+    --action5: var(--grass5);
+    --action6: var(--grass6);
+    --action7: var(--grass7);
+    --action8: var(--grass8);
+    --action9: var(--grass9);
+    --action10: var(--grass10);
+    --action11: var(--grass11);
+    --action12: var(--grass12);
+    --action-contrast: var(--grass-contrast);
+    --action-hover: var(--grass-hover);
+  }
+
+  .actionGray {
+    --action1: var(--gray1);
+    --action2: var(--gray2);
+    --action3: var(--gray3);
+    --action4: var(--gray4);
+    --action5: var(--gray5);
+    --action6: var(--gray6);
+    --action7: var(--gray7);
+    --action8: var(--gray8);
+    --action9: var(--gray9);
+    --action10: var(--gray10);
+    --action11: var(--gray11);
+    --action12: var(--gray12);
+    --action-contrast: var(--gray-contrast);
+    --action-hover: var(--gray-hover);
+  }
+
+  .actionGreen {
+    --action1: var(--green1);
+    --action2: var(--green2);
+    --action3: var(--green3);
+    --action4: var(--green4);
+    --action5: var(--green5);
+    --action6: var(--green6);
+    --action7: var(--green7);
+    --action8: var(--green8);
+    --action9: var(--green9);
+    --action10: var(--green10);
+    --action11: var(--green11);
+    --action12: var(--green12);
+    --action-contrast: var(--green-contrast);
+    --action-hover: var(--green-hover);
+  }
+
+  .actionIndigo {
+    --action1: var(--indigo1);
+    --action2: var(--indigo2);
+    --action3: var(--indigo3);
+    --action4: var(--indigo4);
+    --action5: var(--indigo5);
+    --action6: var(--indigo6);
+    --action7: var(--indigo7);
+    --action8: var(--indigo8);
+    --action9: var(--indigo9);
+    --action10: var(--indigo10);
+    --action11: var(--indigo11);
+    --action12: var(--indigo12);
+    --action-contrast: var(--indigo-contrast);
+    --action-hover: var(--indigo-hover);
+  }
+
+  .actionIris {
+    --action1: var(--iris1);
+    --action2: var(--iris2);
+    --action3: var(--iris3);
+    --action4: var(--iris4);
+    --action5: var(--iris5);
+    --action6: var(--iris6);
+    --action7: var(--iris7);
+    --action8: var(--iris8);
+    --action9: var(--iris9);
+    --action10: var(--iris10);
+    --action11: var(--iris11);
+    --action12: var(--iris12);
+    --action-contrast: var(--iris-contrast);
+    --action-hover: var(--iris-hover);
+  }
+
+  .actionJade {
+    --action1: var(--jade1);
+    --action2: var(--jade2);
+    --action3: var(--jade3);
+    --action4: var(--jade4);
+    --action5: var(--jade5);
+    --action6: var(--jade6);
+    --action7: var(--jade7);
+    --action8: var(--jade8);
+    --action9: var(--jade9);
+    --action10: var(--jade10);
+    --action11: var(--jade11);
+    --action12: var(--jade12);
+    --action-contrast: var(--jade-contrast);
+    --action-hover: var(--jade-hover);
+  }
+
+  .actionLime {
+    --action1: var(--lime1);
+    --action2: var(--lime2);
+    --action3: var(--lime3);
+    --action4: var(--lime4);
+    --action5: var(--lime5);
+    --action6: var(--lime6);
+    --action7: var(--lime7);
+    --action8: var(--lime8);
+    --action9: var(--lime9);
+    --action10: var(--lime10);
+    --action11: var(--lime11);
+    --action12: var(--lime12);
+    --action-contrast: var(--lime-contrast);
+    --action-hover: var(--lime-hover);
+  }
+
+  .actionMauve {
+    --action1: var(--mauve1);
+    --action2: var(--mauve2);
+    --action3: var(--mauve3);
+    --action4: var(--mauve4);
+    --action5: var(--mauve5);
+    --action6: var(--mauve6);
+    --action7: var(--mauve7);
+    --action8: var(--mauve8);
+    --action9: var(--mauve9);
+    --action10: var(--mauve10);
+    --action11: var(--mauve11);
+    --action12: var(--mauve12);
+    --action-contrast: var(--mauve-contrast);
+    --action-hover: var(--mauve-hover);
+  }
+
+  .actionMint {
+    --action1: var(--mint1);
+    --action2: var(--mint2);
+    --action3: var(--mint3);
+    --action4: var(--mint4);
+    --action5: var(--mint5);
+    --action6: var(--mint6);
+    --action7: var(--mint7);
+    --action8: var(--mint8);
+    --action9: var(--mint9);
+    --action10: var(--mint10);
+    --action11: var(--mint11);
+    --action12: var(--mint12);
+    --action-contrast: var(--mint-contrast);
+    --action-hover: var(--mint-hover);
+  }
+
+  .actionOlive {
+    --action1: var(--olive1);
+    --action2: var(--olive2);
+    --action3: var(--olive3);
+    --action4: var(--olive4);
+    --action5: var(--olive5);
+    --action6: var(--olive6);
+    --action7: var(--olive7);
+    --action8: var(--olive8);
+    --action9: var(--olive9);
+    --action10: var(--olive10);
+    --action11: var(--olive11);
+    --action12: var(--olive12);
+    --action-contrast: var(--olive-contrast);
+    --action-hover: var(--olive-hover);
+  }
+
+  .actionOrange {
+    --action1: var(--orange1);
+    --action2: var(--orange2);
+    --action3: var(--orange3);
+    --action4: var(--orange4);
+    --action5: var(--orange5);
+    --action6: var(--orange6);
+    --action7: var(--orange7);
+    --action8: var(--orange8);
+    --action9: var(--orange9);
+    --action10: var(--orange10);
+    --action11: var(--orange11);
+    --action12: var(--orange12);
+    --action-contrast: var(--orange-contrast);
+    --action-hover: var(--orange-hover);
+  }
+
+  .actionPink {
+    --action1: var(--pink1);
+    --action2: var(--pink2);
+    --action3: var(--pink3);
+    --action4: var(--pink4);
+    --action5: var(--pink5);
+    --action6: var(--pink6);
+    --action7: var(--pink7);
+    --action8: var(--pink8);
+    --action9: var(--pink9);
+    --action10: var(--pink10);
+    --action11: var(--pink11);
+    --action12: var(--pink12);
+    --action-contrast: var(--pink-contrast);
+    --action-hover: var(--pink-hover);
+  }
+
+  .actionPlum {
+    --action1: var(--plum1);
+    --action2: var(--plum2);
+    --action3: var(--plum3);
+    --action4: var(--plum4);
+    --action5: var(--plum5);
+    --action6: var(--plum6);
+    --action7: var(--plum7);
+    --action8: var(--plum8);
+    --action9: var(--plum9);
+    --action10: var(--plum10);
+    --action11: var(--plum11);
+    --action12: var(--plum12);
+    --action-contrast: var(--plum-contrast);
+    --action-hover: var(--plum-hover);
+  }
+
+  .actionPurple {
+    --action1: var(--purple1);
+    --action2: var(--purple2);
+    --action3: var(--purple3);
+    --action4: var(--purple4);
+    --action5: var(--purple5);
+    --action6: var(--purple6);
+    --action7: var(--purple7);
+    --action8: var(--purple8);
+    --action9: var(--purple9);
+    --action10: var(--purple10);
+    --action11: var(--purple11);
+    --action12: var(--purple12);
+    --action-contrast: var(--purple-contrast);
+    --action-hover: var(--purple-hover);
+  }
+
+  .actionRed {
+    --action1: var(--red1);
+    --action2: var(--red2);
+    --action3: var(--red3);
+    --action4: var(--red4);
+    --action5: var(--red5);
+    --action6: var(--red6);
+    --action7: var(--red7);
+    --action8: var(--red8);
+    --action9: var(--red9);
+    --action10: var(--red10);
+    --action11: var(--red11);
+    --action12: var(--red12);
+    --action-contrast: var(--red-contrast);
+    --action-hover: var(--red-hover);
+  }
+
+  .actionRuby {
+    --action1: var(--ruby1);
+    --action2: var(--ruby2);
+    --action3: var(--ruby3);
+    --action4: var(--ruby4);
+    --action5: var(--ruby5);
+    --action6: var(--ruby6);
+    --action7: var(--ruby7);
+    --action8: var(--ruby8);
+    --action9: var(--ruby9);
+    --action10: var(--ruby10);
+    --action11: var(--ruby11);
+    --action12: var(--ruby12);
+    --action-contrast: var(--ruby-contrast);
+    --action-hover: var(--ruby-hover);
+  }
+
+  .actionSage {
+    --action1: var(--sage1);
+    --action2: var(--sage2);
+    --action3: var(--sage3);
+    --action4: var(--sage4);
+    --action5: var(--sage5);
+    --action6: var(--sage6);
+    --action7: var(--sage7);
+    --action8: var(--sage8);
+    --action9: var(--sage9);
+    --action10: var(--sage10);
+    --action11: var(--sage11);
+    --action12: var(--sage12);
+    --action-contrast: var(--sage-contrast);
+    --action-hover: var(--sage-hover);
+  }
+
+  .actionSand {
+    --action1: var(--sand1);
+    --action2: var(--sand2);
+    --action3: var(--sand3);
+    --action4: var(--sand4);
+    --action5: var(--sand5);
+    --action6: var(--sand6);
+    --action7: var(--sand7);
+    --action8: var(--sand8);
+    --action9: var(--sand9);
+    --action10: var(--sand10);
+    --action11: var(--sand11);
+    --action12: var(--sand12);
+    --action-contrast: var(--sand-contrast);
+    --action-hover: var(--sand-hover);
+  }
+
+  .actionSky {
+    --action1: var(--sky1);
+    --action2: var(--sky2);
+    --action3: var(--sky3);
+    --action4: var(--sky4);
+    --action5: var(--sky5);
+    --action6: var(--sky6);
+    --action7: var(--sky7);
+    --action8: var(--sky8);
+    --action9: var(--sky9);
+    --action10: var(--sky10);
+    --action11: var(--sky11);
+    --action12: var(--sky12);
+    --action-contrast: var(--sky-contrast);
+    --action-hover: var(--sky-hover);
+  }
+
+  .actionSlate {
+    --action1: var(--slate1);
+    --action2: var(--slate2);
+    --action3: var(--slate3);
+    --action4: var(--slate4);
+    --action5: var(--slate5);
+    --action6: var(--slate6);
+    --action7: var(--slate7);
+    --action8: var(--slate8);
+    --action9: var(--slate9);
+    --action10: var(--slate10);
+    --action11: var(--slate11);
+    --action12: var(--slate12);
+    --action-contrast: var(--slate-contrast);
+    --action-hover: var(--slate-hover);
+  }
+
+  .actionTeal {
+    --action1: var(--teal1);
+    --action2: var(--teal2);
+    --action3: var(--teal3);
+    --action4: var(--teal4);
+    --action5: var(--teal5);
+    --action6: var(--teal6);
+    --action7: var(--teal7);
+    --action8: var(--teal8);
+    --action9: var(--teal9);
+    --action10: var(--teal10);
+    --action11: var(--teal11);
+    --action12: var(--teal12);
+    --action-contrast: var(--teal-contrast);
+    --action-hover: var(--teal-hover);
+  }
+
+  .actionTomato {
+    --action1: var(--tomato1);
+    --action2: var(--tomato2);
+    --action3: var(--tomato3);
+    --action4: var(--tomato4);
+    --action5: var(--tomato5);
+    --action6: var(--tomato6);
+    --action7: var(--tomato7);
+    --action8: var(--tomato8);
+    --action9: var(--tomato9);
+    --action10: var(--tomato10);
+    --action11: var(--tomato11);
+    --action12: var(--tomato12);
+    --action-contrast: var(--tomato-contrast);
+    --action-hover: var(--tomato-hover);
+  }
+
+  .actionViolet {
+    --action1: var(--violet1);
+    --action2: var(--violet2);
+    --action3: var(--violet3);
+    --action4: var(--violet4);
+    --action5: var(--violet5);
+    --action6: var(--violet6);
+    --action7: var(--violet7);
+    --action8: var(--violet8);
+    --action9: var(--violet9);
+    --action10: var(--violet10);
+    --action11: var(--violet11);
+    --action12: var(--violet12);
+    --action-contrast: var(--violet-contrast);
+    --action-hover: var(--violet-hover);
+  }
+
+  .actionYellow {
+    --action1: var(--yellow1);
+    --action2: var(--yellow2);
+    --action3: var(--yellow3);
+    --action4: var(--yellow4);
+    --action5: var(--yellow5);
+    --action6: var(--yellow6);
+    --action7: var(--yellow7);
+    --action8: var(--yellow8);
+    --action9: var(--yellow9);
+    --action10: var(--yellow10);
+    --action11: var(--yellow11);
+    --action12: var(--yellow12);
+    --action-contrast: var(--yellow-contrast);
+    --action-hover: var(--yellow-hover);
+  }
+}