@rookcom/monarch-tokens 0.0.0-stage → 0.2.1

package/dist/css/products/gtm.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: gtm. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="gtm"] {
+    --mn-color-accent-solid: hsl(25 95% 53%);
+    --mn-color-accent-solid-hover: hsl(25 95% 58%);
+    --mn-color-accent-solid-active: hsl(25 95% 62%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(25 81% 96.5%);
+    --mn-color-accent-subtle-hover: hsl(25 81% 93.5%);
+    --mn-color-accent-strong: hsl(25 95% 36%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(25 57% 84%);
+    --primary: 25 95% 53%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 25 95% 36%;
+    --sidebar-primary: 25 95% 53%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 25 95% 36%;
+  }
+
+  .dark[data-mn-product="gtm"],
+  .dark [data-mn-product="gtm"],
+  [data-mn-theme="dark"][data-mn-product="gtm"],
+  [data-mn-theme="dark"] [data-mn-product="gtm"] {
+    --mn-color-accent-solid: hsl(25 95% 53%);
+    --mn-color-accent-solid-hover: hsl(25 95% 58%);
+    --mn-color-accent-solid-active: hsl(25 95% 62%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(25 38% 14%);
+    --mn-color-accent-subtle-hover: hsl(25 38% 18%);
+    --mn-color-accent-strong: hsl(25 95% 53%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(25 42.8% 32%);
+    --primary: 25 95% 53%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 25 95% 53%;
+    --sidebar-primary: 25 95% 53%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 25 95% 53%;
+  }
+
+  [data-mn-contrast="more"][data-mn-product="gtm"],
+  [data-mn-contrast="more"] [data-mn-product="gtm"] {
+    --mn-color-accent-solid: hsl(25 95% 29.5%);
+    --mn-color-accent-solid-hover: hsl(25 95% 24.5%);
+    --mn-color-accent-solid-active: hsl(25 95% 20.5%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(25 81% 97%);
+    --mn-color-accent-subtle-hover: hsl(25 81% 94%);
+    --mn-color-accent-strong: hsl(25 95% 27%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(25 95% 27%);
+    --primary: 25 95% 29.5%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 25 95% 27%;
+    --sidebar-primary: 25 95% 29.5%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 25 95% 27%;
+  }
+
+  .dark[data-mn-contrast="more"][data-mn-product="gtm"],
+  .dark[data-mn-contrast="more"] [data-mn-product="gtm"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="gtm"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="gtm"] {
+    --mn-color-accent-solid: hsl(25 95% 54%);
+    --mn-color-accent-solid-hover: hsl(25 95% 59%);
+    --mn-color-accent-solid-active: hsl(25 95% 63%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(25 38% 10%);
+    --mn-color-accent-subtle-hover: hsl(25 38% 14%);
+    --mn-color-accent-strong: hsl(25 95% 64.5%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(25 95% 64.5%);
+    --primary: 25 95% 54%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 25 95% 64.5%;
+    --sidebar-primary: 25 95% 54%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 25 95% 64.5%;
+  }
+
+}

package/dist/css/products/id.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: id. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="id"] {
+    --mn-color-accent-solid: hsl(354 70% 52%);
+    --mn-color-accent-solid-hover: hsl(354 70% 47%);
+    --mn-color-accent-solid-active: hsl(354 70% 43%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(354 63% 96.5%);
+    --mn-color-accent-subtle-hover: hsl(354 63% 93.5%);
+    --mn-color-accent-strong: hsl(354 70% 46.5%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(354 42% 84%);
+    --primary: 354 70% 52%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 354 70% 46.5%;
+    --sidebar-primary: 354 70% 52%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 354 70% 46.5%;
+  }
+
+  .dark[data-mn-product="id"],
+  .dark [data-mn-product="id"],
+  [data-mn-theme="dark"][data-mn-product="id"],
+  [data-mn-theme="dark"] [data-mn-product="id"] {
+    --mn-color-accent-solid: hsl(354 70% 52%);
+    --mn-color-accent-solid-hover: hsl(354 70% 47%);
+    --mn-color-accent-solid-active: hsl(354 70% 43%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(354 28% 14%);
+    --mn-color-accent-subtle-hover: hsl(354 28% 18%);
+    --mn-color-accent-strong: hsl(354 70% 66%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(354 31.5% 32%);
+    --primary: 354 70% 52%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 354 70% 66%;
+    --sidebar-primary: 354 70% 52%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 354 70% 66%;
+  }
+
+  [data-mn-contrast="more"][data-mn-product="id"],
+  [data-mn-contrast="more"] [data-mn-product="id"] {
+    --mn-color-accent-solid: hsl(354 70% 39.5%);
+    --mn-color-accent-solid-hover: hsl(354 70% 34.5%);
+    --mn-color-accent-solid-active: hsl(354 70% 30.5%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(354 63% 97%);
+    --mn-color-accent-subtle-hover: hsl(354 63% 94%);
+    --mn-color-accent-strong: hsl(354 70% 34.5%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(354 70% 34.5%);
+    --primary: 354 70% 39.5%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 354 70% 34.5%;
+    --sidebar-primary: 354 70% 39.5%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 354 70% 34.5%;
+  }
+
+  .dark[data-mn-contrast="more"][data-mn-product="id"],
+  .dark[data-mn-contrast="more"] [data-mn-product="id"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="id"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="id"] {
+    --mn-color-accent-solid: hsl(354 70% 70%);
+    --mn-color-accent-solid-hover: hsl(354 70% 75%);
+    --mn-color-accent-solid-active: hsl(354 70% 79%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(354 28% 10%);
+    --mn-color-accent-subtle-hover: hsl(354 28% 14%);
+    --mn-color-accent-strong: hsl(354 70% 74.5%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(354 70% 74.5%);
+    --primary: 354 70% 70%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 354 70% 74.5%;
+    --sidebar-primary: 354 70% 70%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 354 70% 74.5%;
+  }
+
+}

package/dist/css/products/intellect.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: intellect. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="intellect"] {
+    --mn-color-accent-solid: hsl(175 77% 26%);
+    --mn-color-accent-solid-hover: hsl(175 77% 21%);
+    --mn-color-accent-solid-active: hsl(175 77% 17%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(175 69.3% 96.5%);
+    --mn-color-accent-subtle-hover: hsl(175 69.3% 93.5%);
+    --mn-color-accent-strong: hsl(175 77% 26%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(175 46.2% 84%);
+    --primary: 175 77% 26%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 175 77% 26%;
+    --sidebar-primary: 175 77% 26%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 175 77% 26%;
+  }
+
+  .dark[data-mn-product="intellect"],
+  .dark [data-mn-product="intellect"],
+  [data-mn-theme="dark"][data-mn-product="intellect"],
+  [data-mn-theme="dark"] [data-mn-product="intellect"] {
+    --mn-color-accent-solid: hsl(175 77% 26%);
+    --mn-color-accent-solid-hover: hsl(175 77% 21%);
+    --mn-color-accent-solid-active: hsl(175 77% 17%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(175 30.8% 14%);
+    --mn-color-accent-subtle-hover: hsl(175 30.8% 18%);
+    --mn-color-accent-strong: hsl(175 77% 40%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(175 34.7% 32%);
+    --primary: 175 77% 26%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 175 77% 40%;
+    --sidebar-primary: 175 77% 26%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 175 77% 40%;
+  }
+
+  [data-mn-contrast="more"][data-mn-product="intellect"],
+  [data-mn-contrast="more"] [data-mn-product="intellect"] {
+    --mn-color-accent-solid: hsl(175 77% 22%);
+    --mn-color-accent-solid-hover: hsl(175 77% 17%);
+    --mn-color-accent-solid-active: hsl(175 77% 13%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(175 69.3% 97%);
+    --mn-color-accent-subtle-hover: hsl(175 69.3% 94%);
+    --mn-color-accent-strong: hsl(175 77% 20%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(175 77% 20%);
+    --primary: 175 77% 22%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 175 77% 20%;
+    --sidebar-primary: 175 77% 22%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 175 77% 20%;
+  }
+
+  .dark[data-mn-contrast="more"][data-mn-product="intellect"],
+  .dark[data-mn-contrast="more"] [data-mn-product="intellect"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="intellect"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="intellect"] {
+    --mn-color-accent-solid: hsl(175 77% 39%);
+    --mn-color-accent-solid-hover: hsl(175 77% 44%);
+    --mn-color-accent-solid-active: hsl(175 77% 48%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(175 30.8% 10%);
+    --mn-color-accent-subtle-hover: hsl(175 30.8% 14%);
+    --mn-color-accent-strong: hsl(175 77% 45.5%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(175 77% 45.5%);
+    --primary: 175 77% 39%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 175 77% 45.5%;
+    --sidebar-primary: 175 77% 39%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 175 77% 45.5%;
+  }
+
+}

package/dist/css/products/links.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: links. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="links"] {
+    --mn-color-accent-solid: hsl(136 53% 34.5%);
+    --mn-color-accent-solid-hover: hsl(136 53% 29.5%);
+    --mn-color-accent-solid-active: hsl(136 53% 25.5%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(136 47.7% 96.5%);
+    --mn-color-accent-subtle-hover: hsl(136 47.7% 93.5%);
+    --mn-color-accent-strong: hsl(136 53% 32%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(136 31.8% 84%);
+    --primary: 136 53% 34.5%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 136 53% 32%;
+    --sidebar-primary: 136 53% 34.5%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 136 53% 32%;
+  }
+
+  .dark[data-mn-product="links"],
+  .dark [data-mn-product="links"],
+  [data-mn-theme="dark"][data-mn-product="links"],
+  [data-mn-theme="dark"] [data-mn-product="links"] {
+    --mn-color-accent-solid: hsl(136 53% 34.5%);
+    --mn-color-accent-solid-hover: hsl(136 53% 29.5%);
+    --mn-color-accent-solid-active: hsl(136 53% 25.5%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(136 21.2% 14%);
+    --mn-color-accent-subtle-hover: hsl(136 21.2% 18%);
+    --mn-color-accent-strong: hsl(136 53% 45.5%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(136 23.9% 32%);
+    --primary: 136 53% 34.5%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 136 53% 45.5%;
+    --sidebar-primary: 136 53% 34.5%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 136 53% 45.5%;
+  }
+
+  [data-mn-contrast="more"][data-mn-product="links"],
+  [data-mn-contrast="more"] [data-mn-product="links"] {
+    --mn-color-accent-solid: hsl(136 53% 26%);
+    --mn-color-accent-solid-hover: hsl(136 53% 21%);
+    --mn-color-accent-solid-active: hsl(136 53% 17%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(136 47.7% 97%);
+    --mn-color-accent-subtle-hover: hsl(136 47.7% 94%);
+    --mn-color-accent-strong: hsl(136 53% 24%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(136 53% 24%);
+    --primary: 136 53% 26%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 136 53% 24%;
+    --sidebar-primary: 136 53% 26%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 136 53% 24%;
+  }
+
+  .dark[data-mn-contrast="more"][data-mn-product="links"],
+  .dark[data-mn-contrast="more"] [data-mn-product="links"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="links"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="links"] {
+    --mn-color-accent-solid: hsl(136 53% 46%);
+    --mn-color-accent-solid-hover: hsl(136 53% 51%);
+    --mn-color-accent-solid-active: hsl(136 53% 55%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(136 21.2% 10%);
+    --mn-color-accent-subtle-hover: hsl(136 21.2% 14%);
+    --mn-color-accent-strong: hsl(136 53% 55%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(136 53% 55%);
+    --primary: 136 53% 46%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 136 53% 55%;
+    --sidebar-primary: 136 53% 46%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 136 53% 55%;
+  }
+
+}

package/dist/css/products/people.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: people. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="people"] {
+    --mn-color-accent-solid: hsl(227 74% 53%);
+    --mn-color-accent-solid-hover: hsl(227 74% 48%);
+    --mn-color-accent-solid-active: hsl(227 74% 44%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(227 66.6% 96.5%);
+    --mn-color-accent-subtle-hover: hsl(227 66.6% 93.5%);
+    --mn-color-accent-strong: hsl(227 74% 53%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(227 44.4% 84%);
+    --primary: 227 74% 53%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 227 74% 53%;
+    --sidebar-primary: 227 74% 53%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 227 74% 53%;
+  }
+
+  .dark[data-mn-product="people"],
+  .dark [data-mn-product="people"],
+  [data-mn-theme="dark"][data-mn-product="people"],
+  [data-mn-theme="dark"] [data-mn-product="people"] {
+    --mn-color-accent-solid: hsl(227 74% 53%);
+    --mn-color-accent-solid-hover: hsl(227 74% 48%);
+    --mn-color-accent-solid-active: hsl(227 74% 44%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(227 29.6% 14%);
+    --mn-color-accent-subtle-hover: hsl(227 29.6% 18%);
+    --mn-color-accent-strong: hsl(227 74% 68.5%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(227 33.3% 32%);
+    --primary: 227 74% 53%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 227 74% 68.5%;
+    --sidebar-primary: 227 74% 53%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 227 74% 68.5%;
+  }
+
+  [data-mn-contrast="more"][data-mn-product="people"],
+  [data-mn-contrast="more"] [data-mn-product="people"] {
+    --mn-color-accent-solid: hsl(227 74% 48.5%);
+    --mn-color-accent-solid-hover: hsl(227 74% 43.5%);
+    --mn-color-accent-solid-active: hsl(227 74% 39.5%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(227 66.6% 97%);
+    --mn-color-accent-subtle-hover: hsl(227 66.6% 94%);
+    --mn-color-accent-strong: hsl(227 74% 42.5%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(227 74% 42.5%);
+    --primary: 227 74% 48.5%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 227 74% 42.5%;
+    --sidebar-primary: 227 74% 48.5%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 227 74% 42.5%;
+  }
+
+  .dark[data-mn-contrast="more"][data-mn-product="people"],
+  .dark[data-mn-contrast="more"] [data-mn-product="people"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="people"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="people"] {
+    --mn-color-accent-solid: hsl(227 74% 72%);
+    --mn-color-accent-solid-hover: hsl(227 74% 77%);
+    --mn-color-accent-solid-active: hsl(227 74% 81%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(227 29.6% 10%);
+    --mn-color-accent-subtle-hover: hsl(227 29.6% 14%);
+    --mn-color-accent-strong: hsl(227 74% 75.5%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(227 74% 75.5%);
+    --primary: 227 74% 72%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 227 74% 75.5%;
+    --sidebar-primary: 227 74% 72%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 227 74% 75.5%;
+  }
+
+}

package/dist/css/products/pulse.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: pulse. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="pulse"] {
+    --mn-color-accent-solid: hsl(326 72% 44%);
+    --mn-color-accent-solid-hover: hsl(326 72% 39%);
+    --mn-color-accent-solid-active: hsl(326 72% 35%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(326 64.8% 96.5%);
+    --mn-color-accent-subtle-hover: hsl(326 64.8% 93.5%);
+    --mn-color-accent-strong: hsl(326 72% 44%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(326 43.2% 84%);
+    --primary: 326 72% 44%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 326 72% 44%;
+    --sidebar-primary: 326 72% 44%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 326 72% 44%;
+  }
+
+  .dark[data-mn-product="pulse"],
+  .dark [data-mn-product="pulse"],
+  [data-mn-theme="dark"][data-mn-product="pulse"],
+  [data-mn-theme="dark"] [data-mn-product="pulse"] {
+    --mn-color-accent-solid: hsl(326 72% 44%);
+    --mn-color-accent-solid-hover: hsl(326 72% 39%);
+    --mn-color-accent-solid-active: hsl(326 72% 35%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(326 28.8% 14%);
+    --mn-color-accent-subtle-hover: hsl(326 28.8% 18%);
+    --mn-color-accent-strong: hsl(326 72% 64.5%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(326 32.4% 32%);
+    --primary: 326 72% 44%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 326 72% 64.5%;
+    --sidebar-primary: 326 72% 44%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 326 72% 64.5%;
+  }
+
+  [data-mn-contrast="more"][data-mn-product="pulse"],
+  [data-mn-contrast="more"] [data-mn-product="pulse"] {
+    --mn-color-accent-solid: hsl(326 72% 37.5%);
+    --mn-color-accent-solid-hover: hsl(326 72% 32.5%);
+    --mn-color-accent-solid-active: hsl(326 72% 28.5%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(326 64.8% 97%);
+    --mn-color-accent-subtle-hover: hsl(326 64.8% 94%);
+    --mn-color-accent-strong: hsl(326 72% 33%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(326 72% 33%);
+    --primary: 326 72% 37.5%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 326 72% 33%;
+    --sidebar-primary: 326 72% 37.5%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 326 72% 33%;
+  }
+
+  .dark[data-mn-contrast="more"][data-mn-product="pulse"],
+  .dark[data-mn-contrast="more"] [data-mn-product="pulse"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="pulse"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="pulse"] {
+    --mn-color-accent-solid: hsl(326 72% 68.5%);
+    --mn-color-accent-solid-hover: hsl(326 72% 73.5%);
+    --mn-color-accent-solid-active: hsl(326 72% 77.5%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(326 28.8% 10%);
+    --mn-color-accent-subtle-hover: hsl(326 28.8% 14%);
+    --mn-color-accent-strong: hsl(326 72% 73.5%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(326 72% 73.5%);
+    --primary: 326 72% 68.5%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 326 72% 73.5%;
+    --sidebar-primary: 326 72% 68.5%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 326 72% 73.5%;
+  }
+
+}

package/dist/css/products/ranker.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: ranker. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="ranker"] {
+    --mn-color-accent-solid: hsl(239 84% 66.5%);
+    --mn-color-accent-solid-hover: hsl(239 84% 61.5%);
+    --mn-color-accent-solid-active: hsl(239 84% 57.5%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(239 75.6% 96.5%);
+    --mn-color-accent-subtle-hover: hsl(239 75.6% 93.5%);
+    --mn-color-accent-strong: hsl(239 84% 61.5%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(239 50.4% 84%);
+    --primary: 239 84% 66.5%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 239 84% 61.5%;
+    --sidebar-primary: 239 84% 66.5%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 239 84% 61.5%;
+  }
+
+  .dark[data-mn-product="ranker"],
+  .dark [data-mn-product="ranker"],
+  [data-mn-theme="dark"][data-mn-product="ranker"],
+  [data-mn-theme="dark"] [data-mn-product="ranker"] {
+    --mn-color-accent-solid: hsl(239 84% 66.5%);
+    --mn-color-accent-solid-hover: hsl(239 84% 61.5%);
+    --mn-color-accent-solid-active: hsl(239 84% 57.5%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(239 33.6% 14%);
+    --mn-color-accent-subtle-hover: hsl(239 33.6% 18%);
+    --mn-color-accent-strong: hsl(239 84% 74%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(239 37.8% 32%);
+    --primary: 239 84% 66.5%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 239 84% 74%;
+    --sidebar-primary: 239 84% 66.5%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 239 84% 74%;
+  }
+
+  [data-mn-contrast="more"][data-mn-product="ranker"],
+  [data-mn-contrast="more"] [data-mn-product="ranker"] {
+    --mn-color-accent-solid: hsl(239 84% 57%);
+    --mn-color-accent-solid-hover: hsl(239 84% 52%);
+    --mn-color-accent-solid-active: hsl(239 84% 48%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(239 75.6% 97%);
+    --mn-color-accent-subtle-hover: hsl(239 75.6% 94%);
+    --mn-color-accent-strong: hsl(239 84% 50.5%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(239 84% 50.5%);
+    --primary: 239 84% 57%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 239 84% 50.5%;
+    --sidebar-primary: 239 84% 57%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 239 84% 50.5%;
+  }
+
+  .dark[data-mn-contrast="more"][data-mn-product="ranker"],
+  .dark[data-mn-contrast="more"] [data-mn-product="ranker"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="ranker"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="ranker"] {
+    --mn-color-accent-solid: hsl(239 84% 77%);
+    --mn-color-accent-solid-hover: hsl(239 84% 82%);
+    --mn-color-accent-solid-active: hsl(239 84% 86%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(239 33.6% 10%);
+    --mn-color-accent-subtle-hover: hsl(239 33.6% 14%);
+    --mn-color-accent-strong: hsl(239 84% 79%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(239 84% 79%);
+    --primary: 239 84% 77%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 239 84% 79%;
+    --sidebar-primary: 239 84% 77%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 239 84% 79%;
+  }
+
+}

package/dist/css/products/recruit.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: recruit. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="recruit"] {
+    --mn-color-accent-solid: hsl(44 100% 48%);
+    --mn-color-accent-solid-hover: hsl(44 100% 53%);
+    --mn-color-accent-solid-active: hsl(44 100% 57%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(44 81% 96.5%);
+    --mn-color-accent-subtle-hover: hsl(44 81% 93.5%);
+    --mn-color-accent-strong: hsl(44 100% 28%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(44 60% 84%);
+    --primary: 44 100% 48%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 44 100% 28%;
+    --sidebar-primary: 44 100% 48%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 44 100% 28%;
+  }
+
+  .dark[data-mn-product="recruit"],
+  .dark [data-mn-product="recruit"],
+  [data-mn-theme="dark"][data-mn-product="recruit"],
+  [data-mn-theme="dark"] [data-mn-product="recruit"] {
+    --mn-color-accent-solid: hsl(44 100% 48%);
+    --mn-color-accent-solid-hover: hsl(44 100% 53%);
+    --mn-color-accent-solid-active: hsl(44 100% 57%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(44 40% 14%);
+    --mn-color-accent-subtle-hover: hsl(44 40% 18%);
+    --mn-color-accent-strong: hsl(44 100% 48%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(44 45% 32%);
+    --primary: 44 100% 48%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 44 100% 48%;
+    --sidebar-primary: 44 100% 48%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 44 100% 48%;
+  }
+
+  [data-mn-contrast="more"][data-mn-product="recruit"],
+  [data-mn-contrast="more"] [data-mn-product="recruit"] {
+    --mn-color-accent-solid: hsl(44 100% 22.5%);
+    --mn-color-accent-solid-hover: hsl(44 100% 17.5%);
+    --mn-color-accent-solid-active: hsl(44 100% 13.5%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(44 81% 97%);
+    --mn-color-accent-subtle-hover: hsl(44 81% 94%);
+    --mn-color-accent-strong: hsl(44 100% 20.5%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(44 100% 20.5%);
+    --primary: 44 100% 22.5%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 44 100% 20.5%;
+    --sidebar-primary: 44 100% 22.5%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 44 100% 20.5%;
+  }
+
+  .dark[data-mn-contrast="more"][data-mn-product="recruit"],
+  .dark[data-mn-contrast="more"] [data-mn-product="recruit"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="recruit"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="recruit"] {
+    --mn-color-accent-solid: hsl(44 100% 48%);
+    --mn-color-accent-solid-hover: hsl(44 100% 53%);
+    --mn-color-accent-solid-active: hsl(44 100% 57%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(44 40% 10%);
+    --mn-color-accent-subtle-hover: hsl(44 40% 14%);
+    --mn-color-accent-strong: hsl(44 100% 48%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(44 100% 48%);
+    --primary: 44 100% 48%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 44 100% 48%;
+    --sidebar-primary: 44 100% 48%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 44 100% 48%;
+  }
+
+}