@rookcom/monarch-tokens 0.0.0-stage → 0.2.0

package/dist/css/products/atlas.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: atlas. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="atlas"] {
+    --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="atlas"],
+  .dark [data-mn-product="atlas"],
+  [data-mn-theme="dark"][data-mn-product="atlas"],
+  [data-mn-theme="dark"] [data-mn-product="atlas"] {
+    --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="atlas"],
+  [data-mn-contrast="more"] [data-mn-product="atlas"] {
+    --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="atlas"],
+  .dark[data-mn-contrast="more"] [data-mn-product="atlas"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="atlas"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="atlas"] {
+    --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/base.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: base. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="base"] {
+    --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="base"],
+  .dark [data-mn-product="base"],
+  [data-mn-theme="dark"][data-mn-product="base"],
+  [data-mn-theme="dark"] [data-mn-product="base"] {
+    --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="base"],
+  [data-mn-contrast="more"] [data-mn-product="base"] {
+    --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% 21%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(44 100% 21%);
+    --primary: 44 100% 22.5%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 44 100% 21%;
+    --sidebar-primary: 44 100% 22.5%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 44 100% 21%;
+  }
+
+  .dark[data-mn-contrast="more"][data-mn-product="base"],
+  .dark[data-mn-contrast="more"] [data-mn-product="base"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="base"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="base"] {
+    --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%;
+  }
+
+}

package/dist/css/products/calendar.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: calendar. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="calendar"] {
+    --mn-color-accent-solid: hsl(198 100% 35%);
+    --mn-color-accent-solid-hover: hsl(198 100% 30%);
+    --mn-color-accent-solid-active: hsl(198 100% 26%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(198 81% 96.5%);
+    --mn-color-accent-subtle-hover: hsl(198 81% 93.5%);
+    --mn-color-accent-strong: hsl(198 100% 32.5%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(198 60% 84%);
+    --primary: 198 100% 35%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 198 100% 32.5%;
+    --sidebar-primary: 198 100% 35%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 198 100% 32.5%;
+  }
+
+  .dark[data-mn-product="calendar"],
+  .dark [data-mn-product="calendar"],
+  [data-mn-theme="dark"][data-mn-product="calendar"],
+  [data-mn-theme="dark"] [data-mn-product="calendar"] {
+    --mn-color-accent-solid: hsl(198 100% 35%);
+    --mn-color-accent-solid-hover: hsl(198 100% 30%);
+    --mn-color-accent-solid-active: hsl(198 100% 26%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(198 40% 14%);
+    --mn-color-accent-subtle-hover: hsl(198 40% 18%);
+    --mn-color-accent-strong: hsl(198 100% 46%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(198 45% 32%);
+    --primary: 198 100% 35%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 198 100% 46%;
+    --sidebar-primary: 198 100% 35%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 198 100% 46%;
+  }
+
+  [data-mn-contrast="more"][data-mn-product="calendar"],
+  [data-mn-contrast="more"] [data-mn-product="calendar"] {
+    --mn-color-accent-solid: hsl(198 100% 26.5%);
+    --mn-color-accent-solid-hover: hsl(198 100% 21.5%);
+    --mn-color-accent-solid-active: hsl(198 100% 17.5%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(198 81% 97%);
+    --mn-color-accent-subtle-hover: hsl(198 81% 94%);
+    --mn-color-accent-strong: hsl(198 100% 24.5%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(198 100% 24.5%);
+    --primary: 198 100% 26.5%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 198 100% 24.5%;
+    --sidebar-primary: 198 100% 26.5%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 198 100% 24.5%;
+  }
+
+  .dark[data-mn-contrast="more"][data-mn-product="calendar"],
+  .dark[data-mn-contrast="more"] [data-mn-product="calendar"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="calendar"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="calendar"] {
+    --mn-color-accent-solid: hsl(198 100% 46.5%);
+    --mn-color-accent-solid-hover: hsl(198 100% 51.5%);
+    --mn-color-accent-solid-active: hsl(198 100% 55.5%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(198 40% 10%);
+    --mn-color-accent-subtle-hover: hsl(198 40% 14%);
+    --mn-color-accent-strong: hsl(198 100% 57%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(198 100% 57%);
+    --primary: 198 100% 46.5%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 198 100% 57%;
+    --sidebar-primary: 198 100% 46.5%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 198 100% 57%;
+  }
+
+}

package/dist/css/products/chat.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: chat. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="chat"] {
+    --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="chat"],
+  .dark [data-mn-product="chat"],
+  [data-mn-theme="dark"][data-mn-product="chat"],
+  [data-mn-theme="dark"] [data-mn-product="chat"] {
+    --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% 71.5%);
+    --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% 71.5%;
+    --sidebar-primary: 239 84% 66.5%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 239 84% 71.5%;
+  }
+
+  [data-mn-contrast="more"][data-mn-product="chat"],
+  [data-mn-contrast="more"] [data-mn-product="chat"] {
+    --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="chat"],
+  .dark[data-mn-contrast="more"] [data-mn-product="chat"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="chat"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="chat"] {
+    --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/developers.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: developers. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="developers"] {
+    --mn-color-accent-solid: hsl(0 0% 9%);
+    --mn-color-accent-solid-hover: hsl(0 0% 4%);
+    --mn-color-accent-solid-active: hsl(0 0% 0%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(0 0% 96.5%);
+    --mn-color-accent-subtle-hover: hsl(0 0% 93.5%);
+    --mn-color-accent-strong: hsl(0 0% 9%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(0 0% 84%);
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 0 0% 9%;
+    --sidebar-primary: 0 0% 9%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 0 0% 9%;
+  }
+
+  .dark[data-mn-product="developers"],
+  .dark [data-mn-product="developers"],
+  [data-mn-theme="dark"][data-mn-product="developers"],
+  [data-mn-theme="dark"] [data-mn-product="developers"] {
+    --mn-color-accent-solid: hsl(0 0% 94%);
+    --mn-color-accent-solid-hover: hsl(0 0% 99%);
+    --mn-color-accent-solid-active: hsl(0 0% 100%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(0 0% 14%);
+    --mn-color-accent-subtle-hover: hsl(0 0% 18%);
+    --mn-color-accent-strong: hsl(0 0% 80%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(0 0% 32%);
+    --primary: 0 0% 94%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 0 0% 80%;
+    --sidebar-primary: 0 0% 94%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 0 0% 80%;
+  }
+
+  [data-mn-contrast="more"][data-mn-product="developers"],
+  [data-mn-contrast="more"] [data-mn-product="developers"] {
+    --mn-color-accent-solid: hsl(0 0% 9%);
+    --mn-color-accent-solid-hover: hsl(0 0% 4%);
+    --mn-color-accent-solid-active: hsl(0 0% 0%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(0 0% 97%);
+    --mn-color-accent-subtle-hover: hsl(0 0% 94%);
+    --mn-color-accent-strong: hsl(0 0% 9%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(0 0% 9%);
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 0 0% 9%;
+    --sidebar-primary: 0 0% 9%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 0 0% 9%;
+  }
+
+  .dark[data-mn-contrast="more"][data-mn-product="developers"],
+  .dark[data-mn-contrast="more"] [data-mn-product="developers"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="developers"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="developers"] {
+    --mn-color-accent-solid: hsl(0 0% 94%);
+    --mn-color-accent-solid-hover: hsl(0 0% 99%);
+    --mn-color-accent-solid-active: hsl(0 0% 100%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(0 0% 10%);
+    --mn-color-accent-subtle-hover: hsl(0 0% 14%);
+    --mn-color-accent-strong: hsl(0 0% 80%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(0 0% 80%);
+    --primary: 0 0% 94%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 0 0% 80%;
+    --sidebar-primary: 0 0% 94%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 0 0% 80%;
+  }
+
+}

package/dist/css/products/dossier.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: dossier. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="dossier"] {
+    --mn-color-accent-solid: hsl(175 84% 28%);
+    --mn-color-accent-solid-hover: hsl(175 84% 23%);
+    --mn-color-accent-solid-active: hsl(175 84% 19%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(175 75.6% 96.5%);
+    --mn-color-accent-subtle-hover: hsl(175 75.6% 93.5%);
+    --mn-color-accent-strong: hsl(175 84% 27%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(175 50.4% 84%);
+    --primary: 175 84% 28%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 175 84% 27%;
+    --sidebar-primary: 175 84% 28%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 175 84% 27%;
+  }
+
+  .dark[data-mn-product="dossier"],
+  .dark [data-mn-product="dossier"],
+  [data-mn-theme="dark"][data-mn-product="dossier"],
+  [data-mn-theme="dark"] [data-mn-product="dossier"] {
+    --mn-color-accent-solid: hsl(175 84% 28%);
+    --mn-color-accent-solid-hover: hsl(175 84% 23%);
+    --mn-color-accent-solid-active: hsl(175 84% 19%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(175 33.6% 14%);
+    --mn-color-accent-subtle-hover: hsl(175 33.6% 18%);
+    --mn-color-accent-strong: hsl(175 84% 38.5%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(175 37.8% 32%);
+    --primary: 175 84% 28%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 175 84% 38.5%;
+    --sidebar-primary: 175 84% 28%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 175 84% 38.5%;
+  }
+
+  [data-mn-contrast="more"][data-mn-product="dossier"],
+  [data-mn-contrast="more"] [data-mn-product="dossier"] {
+    --mn-color-accent-solid: hsl(175 84% 21%);
+    --mn-color-accent-solid-hover: hsl(175 84% 16%);
+    --mn-color-accent-solid-active: hsl(175 84% 12%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(175 75.6% 97%);
+    --mn-color-accent-subtle-hover: hsl(175 75.6% 94%);
+    --mn-color-accent-strong: hsl(175 84% 20%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(175 84% 20%);
+    --primary: 175 84% 21%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 175 84% 20%;
+    --sidebar-primary: 175 84% 21%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 175 84% 20%;
+  }
+
+  .dark[data-mn-contrast="more"][data-mn-product="dossier"],
+  .dark[data-mn-contrast="more"] [data-mn-product="dossier"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="dossier"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="dossier"] {
+    --mn-color-accent-solid: hsl(175 84% 37.5%);
+    --mn-color-accent-solid-hover: hsl(175 84% 42.5%);
+    --mn-color-accent-solid-active: hsl(175 84% 46.5%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(175 33.6% 10%);
+    --mn-color-accent-subtle-hover: hsl(175 33.6% 14%);
+    --mn-color-accent-strong: hsl(175 84% 44%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(175 84% 44%);
+    --primary: 175 84% 37.5%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 175 84% 44%;
+    --sidebar-primary: 175 84% 37.5%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 175 84% 44%;
+  }
+
+}

package/dist/css/products/dots.css

@@ -0,0 +1,85 @@
+/*! Monarch product accent: dots. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  [data-mn-product="dots"] {
+    --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="dots"],
+  .dark [data-mn-product="dots"],
+  [data-mn-theme="dark"][data-mn-product="dots"],
+  [data-mn-theme="dark"] [data-mn-product="dots"] {
+    --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% 65%);
+    --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% 65%;
+    --sidebar-primary: 354 70% 52%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 354 70% 65%;
+  }
+
+  [data-mn-contrast="more"][data-mn-product="dots"],
+  [data-mn-contrast="more"] [data-mn-product="dots"] {
+    --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="dots"],
+  .dark[data-mn-contrast="more"] [data-mn-product="dots"],
+  [data-mn-theme="dark"][data-mn-contrast="more"][data-mn-product="dots"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] [data-mn-product="dots"] {
+    --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/friends.css

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