@rookcom/monarch-tokens 0.0.0-stage → 0.2.0

package/dist/css/base.css

@@ -0,0 +1,31 @@
+/*! Monarch base styles. Optional. Generated by @rookcom/monarch-tokens. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.base {
+  html {
+    -webkit-text-size-adjust: 100%;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  body {
+    background: var(--mn-color-bg-canvas);
+    color: var(--mn-color-text-default);
+    font-family: var(--mn-font-sans);
+  }
+  :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex='-1']), [role='button'], [role='tab'], [role='menuitem'], [role='option']):focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  ::selection {
+    background: color-mix(in srgb, var(--mn-color-accent-strong) 22%, transparent);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/dist/css/compat.css

@@ -0,0 +1,149 @@
+/*! Monarch legacy bridge (shadcn variable names). Deprecated: remove after migration.. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  :root,
+  [data-mn-theme="light"] {
+    --background: 220 20% 99%;
+    --foreground: 222 16% 13.5%;
+    --card: 0 0% 100%;
+    --card-foreground: 222 16% 13.5%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222 16% 13.5%;
+    --secondary: 197.5 100% 34.6%;
+    --secondary-foreground: 0 0% 100%;
+    --accent: 197.5 100% 34.6%;
+    --accent-foreground: 0 0% 100%;
+    --success: 136 62.8% 32.7%;
+    --success-foreground: 0 0% 100%;
+    --warning: 44.3 100% 47.8%;
+    --warning-foreground: 224 22% 6.5%;
+    --destructive: 354.5 71.3% 52.2%;
+    --destructive-foreground: 0 0% 100%;
+    --muted: 220 14% 95.5%;
+    --muted-foreground: 220 10% 37%;
+    --border: 220 13% 89%;
+    --input: 220 9% 56%;
+    --radius: 0.75rem;
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 222 16% 13.5%;
+    --sidebar-accent: 220 14% 95.5%;
+    --sidebar-accent-foreground: 222 16% 13.5%;
+    --sidebar-border: 220 13% 89%;
+    --primary: 354.5 71.3% 52.2%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 354.5 71.3% 46.2%;
+    --sidebar-primary: 354.5 71.3% 52.2%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 354.5 71.3% 46.2%;
+  }
+
+  .dark,
+  [data-mn-theme="dark"] {
+    --background: 224 22% 6.5%;
+    --foreground: 220 17% 97.5%;
+    --card: 222 18% 10%;
+    --card-foreground: 220 17% 97.5%;
+    --popover: 222 16% 13.5%;
+    --popover-foreground: 220 17% 97.5%;
+    --secondary: 197.5 100% 34.6%;
+    --secondary-foreground: 0 0% 100%;
+    --accent: 197.5 100% 34.6%;
+    --accent-foreground: 0 0% 100%;
+    --success: 136 62.8% 32.7%;
+    --success-foreground: 0 0% 100%;
+    --warning: 44.3 100% 47.8%;
+    --warning-foreground: 224 22% 6.5%;
+    --destructive: 354.5 71.3% 52.2%;
+    --destructive-foreground: 0 0% 100%;
+    --muted: 221 15% 18%;
+    --muted-foreground: 220 11% 80%;
+    --border: 221 15% 18%;
+    --input: 220 9% 45%;
+    --radius: 0.75rem;
+    --sidebar-background: 222 18% 10%;
+    --sidebar-foreground: 220 17% 97.5%;
+    --sidebar-accent: 221 15% 18%;
+    --sidebar-accent-foreground: 220 17% 97.5%;
+    --sidebar-border: 221 15% 18%;
+    --primary: 354.5 71.3% 52.2%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 354.5 71.3% 64.7%;
+    --sidebar-primary: 354.5 71.3% 52.2%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 354.5 71.3% 64.7%;
+  }
+
+  [data-mn-contrast="more"] {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 0%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 0%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 0%;
+    --secondary: 197.5 100% 26.1%;
+    --secondary-foreground: 0 0% 100%;
+    --accent: 197.5 100% 26.1%;
+    --accent-foreground: 0 0% 100%;
+    --success: 136 62.8% 24.7%;
+    --success-foreground: 0 0% 100%;
+    --warning: 44.3 100% 22.3%;
+    --warning-foreground: 0 0% 100%;
+    --destructive: 354.5 71.3% 39.7%;
+    --destructive-foreground: 0 0% 100%;
+    --muted: 220 14% 95.5%;
+    --muted-foreground: 221 15% 18%;
+    --border: 220 10% 37%;
+    --input: 220 13% 27%;
+    --radius: 0.75rem;
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 0 0% 0%;
+    --sidebar-accent: 220 14% 95.5%;
+    --sidebar-accent-foreground: 0 0% 0%;
+    --sidebar-border: 220 10% 37%;
+    --primary: 354.5 71.3% 39.7%;
+    --primary-foreground: 0 0% 100%;
+    --ring: 354.5 71.3% 34.7%;
+    --sidebar-primary: 354.5 71.3% 39.7%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-ring: 354.5 71.3% 34.7%;
+  }
+
+  .dark[data-mn-contrast="more"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] {
+    --background: 0 0% 0%;
+    --foreground: 0 0% 100%;
+    --card: 0 0% 0%;
+    --card-foreground: 0 0% 100%;
+    --popover: 224 22% 6.5%;
+    --popover-foreground: 0 0% 100%;
+    --secondary: 197.5 100% 46.6%;
+    --secondary-foreground: 224 22% 6.5%;
+    --accent: 197.5 100% 46.6%;
+    --accent-foreground: 224 22% 6.5%;
+    --success: 136 62.8% 43.7%;
+    --success-foreground: 224 22% 6.5%;
+    --warning: 44.3 100% 47.8%;
+    --warning-foreground: 224 22% 6.5%;
+    --destructive: 354.5 71.3% 70.2%;
+    --destructive-foreground: 224 22% 6.5%;
+    --muted: 222 18% 10%;
+    --muted-foreground: 220 13% 92.5%;
+    --border: 220 9% 64%;
+    --input: 220 11% 80%;
+    --radius: 0.75rem;
+    --sidebar-background: 0 0% 0%;
+    --sidebar-foreground: 0 0% 100%;
+    --sidebar-accent: 222 18% 10%;
+    --sidebar-accent-foreground: 0 0% 100%;
+    --sidebar-border: 220 9% 64%;
+    --primary: 354.5 71.3% 70.2%;
+    --primary-foreground: 224 22% 6.5%;
+    --ring: 354.5 71.3% 74.7%;
+    --sidebar-primary: 354.5 71.3% 70.2%;
+    --sidebar-primary-foreground: 224 22% 6.5%;
+    --sidebar-ring: 354.5 71.3% 74.7%;
+  }
+
+}

package/dist/css/monarch.css

@@ -0,0 +1,429 @@
+/*! Monarch tokens. Generated by @rookcom/monarch-tokens. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.tokens {
+
+  :root {
+    --mn-font-sans: var(--font-poppins, 'Poppins'), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --mn-font-mono: var(--font-mono, ui-monospace), 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
+    --mn-text-2xs: 0.6875rem;
+    --mn-text-xs: 0.75rem;
+    --mn-text-sm: 0.875rem;
+    --mn-text-base: 1rem;
+    --mn-text-lg: 1.125rem;
+    --mn-text-xl: 1.25rem;
+    --mn-text-2xl: 1.5rem;
+    --mn-text-3xl: 1.875rem;
+    --mn-text-4xl: 2.25rem;
+    --mn-text-5xl: 3rem;
+    --mn-leading-tight: 1.2;
+    --mn-leading-snug: 1.35;
+    --mn-leading-normal: 1.5;
+    --mn-leading-relaxed: 1.65;
+    --mn-weight-regular: 400;
+    --mn-weight-medium: 500;
+    --mn-weight-semibold: 600;
+    --mn-weight-bold: 700;
+    --mn-tracking-tight: -0.02em;
+    --mn-tracking-snug: -0.01em;
+    --mn-tracking-normal: 0;
+    --mn-tracking-wide: 0.02em;
+    --mn-tracking-caps: 0.06em;
+    --mn-space-0: 0;
+    --mn-space-1: 0.25rem;
+    --mn-space-2: 0.5rem;
+    --mn-space-3: 0.75rem;
+    --mn-space-4: 1rem;
+    --mn-space-5: 1.25rem;
+    --mn-space-6: 1.5rem;
+    --mn-space-8: 2rem;
+    --mn-space-10: 2.5rem;
+    --mn-space-12: 3rem;
+    --mn-space-16: 4rem;
+    --mn-space-20: 5rem;
+    --mn-space-24: 6rem;
+    --mn-space-px: 1px;
+    --mn-space-0-5: 0.125rem;
+    --mn-space-1-5: 0.375rem;
+    --mn-space-2-5: 0.625rem;
+    --mn-radius-none: 0;
+    --mn-radius-xs: 0.25rem;
+    --mn-radius-sm: 0.375rem;
+    --mn-radius-md: 0.5rem;
+    --mn-radius-lg: 0.75rem;
+    --mn-radius-xl: 1rem;
+    --mn-radius-2xl: 1.25rem;
+    --mn-radius-full: 9999px;
+    --mn-control-xs: 1.75rem;
+    --mn-control-sm: 2rem;
+    --mn-control-md: 2.25rem;
+    --mn-control-lg: 2.5rem;
+    --mn-control-xl: 3rem;
+    --mn-duration-instant: 0ms;
+    --mn-duration-fast: 120ms;
+    --mn-duration-base: 180ms;
+    --mn-duration-slow: 260ms;
+    --mn-duration-slower: 400ms;
+    --mn-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --mn-ease-enter: cubic-bezier(0, 0, 0.2, 1);
+    --mn-ease-exit: cubic-bezier(0.4, 0, 1, 1);
+    --mn-ease-emphasized: cubic-bezier(0.3, 0, 0, 1.15);
+    --mn-breakpoint-sm: 640px;
+    --mn-breakpoint-md: 768px;
+    --mn-breakpoint-lg: 1024px;
+    --mn-breakpoint-xl: 1280px;
+    --mn-breakpoint-2xl: 1536px;
+    --mn-z-base: 0;
+    --mn-z-raised: 10;
+    --mn-z-sticky: 100;
+    --mn-z-rail: 200;
+    --mn-z-dropdown: 1000;
+    --mn-z-overlay: 1100;
+    --mn-z-modal: 1200;
+    --mn-z-popover: 1300;
+    --mn-z-toast: 1400;
+    --mn-z-tooltip: 1500;
+    --mn-layout-rail-collapsed: 3rem;
+    --mn-layout-rail-expanded: 14rem;
+    --mn-layout-content-max: 80rem;
+    --mn-layout-reading-max: 42rem;
+    --mn-layout-gutter: 1rem;
+    --mn-layout-gutter-lg: 1.5rem;
+    --mn-color-spectrum-blue: hsl(214 90% 58%);
+    --mn-color-spectrum-violet: hsl(256 82% 58%);
+    --mn-color-spectrum-purple: hsl(280 68% 58%);
+    --mn-color-spectrum-pink: hsl(330 78% 58%);
+    --mn-color-spectrum-orange: hsl(24 94% 58%);
+    --mn-gradient-spectrum: linear-gradient(120deg, hsl(214 90% 58%), hsl(256 82% 58%) 30%, hsl(280 68% 58%) 55%, hsl(330 78% 58%) 78%, hsl(24 94% 58%));
+  }
+
+  :root,
+  [data-mn-theme="light"] {
+    color-scheme: light;
+    --mn-color-bg-canvas: hsl(220 20% 99%);
+    --mn-color-bg-surface: hsl(0 0% 100%);
+    --mn-color-bg-raised: hsl(0 0% 100%);
+    --mn-color-bg-subtle: hsl(220 17% 97.5%);
+    --mn-color-bg-muted: hsl(220 14% 95.5%);
+    --mn-color-bg-emphasis: hsl(220 13% 92.5%);
+    --mn-color-bg-inverse: hsl(222 18% 10%);
+    --mn-color-text-default: hsl(222 16% 13.5%);
+    --mn-color-text-muted: hsl(220 10% 37%);
+    --mn-color-text-subtle: hsl(220 9% 43.5%);
+    --mn-color-text-disabled: hsl(220 9% 64%);
+    --mn-color-text-inverse: hsl(0 0% 100%);
+    --mn-color-border-subtle: hsl(220 13% 92.5%);
+    --mn-color-border-default: hsl(220 13% 89%);
+    --mn-color-border-strong: hsl(220 11% 80%);
+    --mn-color-border-input: hsl(220 9% 56%);
+    --mn-color-accent-solid: hsl(354.5 71.3% 52.2%);
+    --mn-color-accent-solid-hover: hsl(354.5 71.3% 47.2%);
+    --mn-color-accent-solid-active: hsl(354.5 71.3% 43.2%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(354.5 64.2% 96.5%);
+    --mn-color-accent-subtle-hover: hsl(354.5 64.2% 93.5%);
+    --mn-color-accent-strong: hsl(354.5 71.3% 46.2%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(354.5 42.8% 84%);
+    --mn-color-danger-solid: hsl(354.5 71.3% 52.2%);
+    --mn-color-danger-solid-hover: hsl(354.5 71.3% 47.2%);
+    --mn-color-danger-solid-active: hsl(354.5 71.3% 43.2%);
+    --mn-color-danger-on-solid: hsl(0 0% 100%);
+    --mn-color-danger-subtle: hsl(354.5 64.2% 96.5%);
+    --mn-color-danger-subtle-hover: hsl(354.5 64.2% 93.5%);
+    --mn-color-danger-strong: hsl(354.5 71.3% 46.2%);
+    --mn-color-danger-on-strong: hsl(0 0% 100%);
+    --mn-color-danger-border: hsl(354.5 42.8% 84%);
+    --mn-color-success-solid: hsl(136 62.8% 32.7%);
+    --mn-color-success-solid-hover: hsl(136 62.8% 27.7%);
+    --mn-color-success-solid-active: hsl(136 62.8% 23.7%);
+    --mn-color-success-on-solid: hsl(0 0% 100%);
+    --mn-color-success-subtle: hsl(136 56.5% 96.5%);
+    --mn-color-success-subtle-hover: hsl(136 56.5% 93.5%);
+    --mn-color-success-strong: hsl(136 62.8% 30.7%);
+    --mn-color-success-on-strong: hsl(0 0% 100%);
+    --mn-color-success-border: hsl(136 37.7% 84%);
+    --mn-color-warning-solid: hsl(44.3 100% 47.8%);
+    --mn-color-warning-solid-hover: hsl(44.3 100% 52.8%);
+    --mn-color-warning-solid-active: hsl(44.3 100% 56.8%);
+    --mn-color-warning-on-solid: hsl(224 22% 6.5%);
+    --mn-color-warning-subtle: hsl(44.3 81% 96.5%);
+    --mn-color-warning-subtle-hover: hsl(44.3 81% 93.5%);
+    --mn-color-warning-strong: hsl(44.3 100% 27.8%);
+    --mn-color-warning-on-strong: hsl(0 0% 100%);
+    --mn-color-warning-border: hsl(44.3 60% 84%);
+    --mn-color-info-solid: hsl(197.5 100% 34.6%);
+    --mn-color-info-solid-hover: hsl(197.5 100% 29.6%);
+    --mn-color-info-solid-active: hsl(197.5 100% 25.6%);
+    --mn-color-info-on-solid: hsl(0 0% 100%);
+    --mn-color-info-subtle: hsl(197.5 81% 96.5%);
+    --mn-color-info-subtle-hover: hsl(197.5 81% 93.5%);
+    --mn-color-info-strong: hsl(197.5 100% 32.1%);
+    --mn-color-info-on-strong: hsl(0 0% 100%);
+    --mn-color-info-border: hsl(197.5 60% 84%);
+    --mn-color-text-link: var(--mn-color-accent-strong);
+    --mn-color-focus-ring: var(--mn-color-accent-strong);
+    --mn-focus-ring-width: 2px;
+    --mn-color-overlay-scrim: hsl(222 25% 8% / 0.42);
+    --mn-shadow-xs: 0 1px 2px hsl(222 30% 10% / 0.06);
+    --mn-shadow-sm: 0 1px 3px hsl(222 30% 10% / 0.08), 0 1px 2px hsl(222 30% 10% / 0.04);
+    --mn-shadow-md: 0 4px 12px -2px hsl(222 30% 10% / 0.08), 0 2px 4px -2px hsl(222 30% 10% / 0.05);
+    --mn-shadow-lg: 0 12px 32px -8px hsl(222 30% 10% / 0.14), 0 4px 8px -4px hsl(222 30% 10% / 0.06);
+    --mn-shadow-xl: 0 24px 64px -16px hsl(222 30% 10% / 0.22), 0 8px 16px -8px hsl(222 30% 10% / 0.08);
+    --mn-color-data-1: hsl(214 90% 49%);
+    --mn-color-data-2: hsl(24 94% 49%);
+    --mn-color-data-3: hsl(256 82% 49%);
+    --mn-color-data-4: hsl(330 78% 49%);
+    --mn-color-data-5: hsl(280 68% 49%);
+  }
+
+  .dark,
+  [data-mn-theme="dark"] {
+    color-scheme: dark;
+    --mn-color-bg-canvas: hsl(224 22% 6.5%);
+    --mn-color-bg-surface: hsl(222 18% 10%);
+    --mn-color-bg-raised: hsl(222 16% 13.5%);
+    --mn-color-bg-subtle: hsl(222 18% 10%);
+    --mn-color-bg-muted: hsl(221 15% 18%);
+    --mn-color-bg-emphasis: hsl(220 13% 27%);
+    --mn-color-bg-inverse: hsl(220 17% 97.5%);
+    --mn-color-text-default: hsl(220 17% 97.5%);
+    --mn-color-text-muted: hsl(220 11% 80%);
+    --mn-color-text-subtle: hsl(220 9% 64%);
+    --mn-color-text-disabled: hsl(220 10% 37%);
+    --mn-color-text-inverse: hsl(222 18% 10%);
+    --mn-color-border-subtle: hsl(222 16% 13.5%);
+    --mn-color-border-default: hsl(221 15% 18%);
+    --mn-color-border-strong: hsl(220 13% 27%);
+    --mn-color-border-input: hsl(220 9% 45%);
+    --mn-color-accent-solid: hsl(354.5 71.3% 52.2%);
+    --mn-color-accent-solid-hover: hsl(354.5 71.3% 47.2%);
+    --mn-color-accent-solid-active: hsl(354.5 71.3% 43.2%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(354.5 28.5% 14%);
+    --mn-color-accent-subtle-hover: hsl(354.5 28.5% 18%);
+    --mn-color-accent-strong: hsl(354.5 71.3% 64.7%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(354.5 32.1% 32%);
+    --mn-color-danger-solid: hsl(354.5 71.3% 52.2%);
+    --mn-color-danger-solid-hover: hsl(354.5 71.3% 47.2%);
+    --mn-color-danger-solid-active: hsl(354.5 71.3% 43.2%);
+    --mn-color-danger-on-solid: hsl(0 0% 100%);
+    --mn-color-danger-subtle: hsl(354.5 28.5% 14%);
+    --mn-color-danger-subtle-hover: hsl(354.5 28.5% 18%);
+    --mn-color-danger-strong: hsl(354.5 71.3% 64.7%);
+    --mn-color-danger-on-strong: hsl(224 22% 6.5%);
+    --mn-color-danger-border: hsl(354.5 32.1% 32%);
+    --mn-color-success-solid: hsl(136 62.8% 32.7%);
+    --mn-color-success-solid-hover: hsl(136 62.8% 27.7%);
+    --mn-color-success-solid-active: hsl(136 62.8% 23.7%);
+    --mn-color-success-on-solid: hsl(0 0% 100%);
+    --mn-color-success-subtle: hsl(136 25.1% 14%);
+    --mn-color-success-subtle-hover: hsl(136 25.1% 18%);
+    --mn-color-success-strong: hsl(136 62.8% 43.2%);
+    --mn-color-success-on-strong: hsl(224 22% 6.5%);
+    --mn-color-success-border: hsl(136 28.3% 32%);
+    --mn-color-warning-solid: hsl(44.3 100% 47.8%);
+    --mn-color-warning-solid-hover: hsl(44.3 100% 52.8%);
+    --mn-color-warning-solid-active: hsl(44.3 100% 56.8%);
+    --mn-color-warning-on-solid: hsl(224 22% 6.5%);
+    --mn-color-warning-subtle: hsl(44.3 40% 14%);
+    --mn-color-warning-subtle-hover: hsl(44.3 40% 18%);
+    --mn-color-warning-strong: hsl(44.3 100% 47.8%);
+    --mn-color-warning-on-strong: hsl(224 22% 6.5%);
+    --mn-color-warning-border: hsl(44.3 45% 32%);
+    --mn-color-info-solid: hsl(197.5 100% 34.6%);
+    --mn-color-info-solid-hover: hsl(197.5 100% 29.6%);
+    --mn-color-info-solid-active: hsl(197.5 100% 25.6%);
+    --mn-color-info-on-solid: hsl(0 0% 100%);
+    --mn-color-info-subtle: hsl(197.5 40% 14%);
+    --mn-color-info-subtle-hover: hsl(197.5 40% 18%);
+    --mn-color-info-strong: hsl(197.5 100% 45.6%);
+    --mn-color-info-on-strong: hsl(224 22% 6.5%);
+    --mn-color-info-border: hsl(197.5 45% 32%);
+    --mn-color-text-link: var(--mn-color-accent-strong);
+    --mn-color-focus-ring: var(--mn-color-accent-strong);
+    --mn-focus-ring-width: 2px;
+    --mn-color-overlay-scrim: hsl(0 0% 0% / 0.62);
+    --mn-shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.4);
+    --mn-shadow-sm: 0 1px 3px hsl(0 0% 0% / 0.45), 0 1px 2px hsl(0 0% 0% / 0.3);
+    --mn-shadow-md: 0 4px 12px -2px hsl(0 0% 0% / 0.5), 0 2px 4px -2px hsl(0 0% 0% / 0.35);
+    --mn-shadow-lg: 0 12px 32px -8px hsl(0 0% 0% / 0.6), 0 4px 8px -4px hsl(0 0% 0% / 0.4);
+    --mn-shadow-xl: 0 24px 64px -16px hsl(0 0% 0% / 0.7), 0 8px 16px -8px hsl(0 0% 0% / 0.45);
+    --mn-color-data-1: hsl(214 90% 68%);
+    --mn-color-data-2: hsl(24 94% 68%);
+    --mn-color-data-3: hsl(256 82% 68%);
+    --mn-color-data-4: hsl(330 78% 68%);
+    --mn-color-data-5: hsl(280 68% 68%);
+  }
+
+  [data-mn-contrast="more"] {
+    color-scheme: light;
+    --mn-color-bg-canvas: hsl(0 0% 100%);
+    --mn-color-bg-surface: hsl(0 0% 100%);
+    --mn-color-bg-raised: hsl(0 0% 100%);
+    --mn-color-bg-subtle: hsl(220 17% 97.5%);
+    --mn-color-bg-muted: hsl(220 14% 95.5%);
+    --mn-color-bg-emphasis: hsl(220 13% 92.5%);
+    --mn-color-bg-inverse: hsl(0 0% 0%);
+    --mn-color-text-default: hsl(0 0% 0%);
+    --mn-color-text-muted: hsl(221 15% 18%);
+    --mn-color-text-subtle: hsl(220 13% 27%);
+    --mn-color-text-disabled: hsl(220 9% 43.5%);
+    --mn-color-text-inverse: hsl(0 0% 100%);
+    --mn-color-border-subtle: hsl(220 9% 43.5%);
+    --mn-color-border-default: hsl(220 10% 37%);
+    --mn-color-border-strong: hsl(221 15% 18%);
+    --mn-color-border-input: hsl(220 13% 27%);
+    --mn-color-accent-solid: hsl(354.5 71.3% 39.7%);
+    --mn-color-accent-solid-hover: hsl(354.5 71.3% 34.7%);
+    --mn-color-accent-solid-active: hsl(354.5 71.3% 30.7%);
+    --mn-color-accent-on-solid: hsl(0 0% 100%);
+    --mn-color-accent-subtle: hsl(354.5 64.2% 97%);
+    --mn-color-accent-subtle-hover: hsl(354.5 64.2% 94%);
+    --mn-color-accent-strong: hsl(354.5 71.3% 34.7%);
+    --mn-color-accent-on-strong: hsl(0 0% 100%);
+    --mn-color-accent-border: hsl(354.5 71.3% 34.7%);
+    --mn-color-danger-solid: hsl(354.5 71.3% 39.7%);
+    --mn-color-danger-solid-hover: hsl(354.5 71.3% 34.7%);
+    --mn-color-danger-solid-active: hsl(354.5 71.3% 30.7%);
+    --mn-color-danger-on-solid: hsl(0 0% 100%);
+    --mn-color-danger-subtle: hsl(354.5 64.2% 97%);
+    --mn-color-danger-subtle-hover: hsl(354.5 64.2% 94%);
+    --mn-color-danger-strong: hsl(354.5 71.3% 34.7%);
+    --mn-color-danger-on-strong: hsl(0 0% 100%);
+    --mn-color-danger-border: hsl(354.5 71.3% 34.7%);
+    --mn-color-success-solid: hsl(136 62.8% 24.7%);
+    --mn-color-success-solid-hover: hsl(136 62.8% 19.7%);
+    --mn-color-success-solid-active: hsl(136 62.8% 15.7%);
+    --mn-color-success-on-solid: hsl(0 0% 100%);
+    --mn-color-success-subtle: hsl(136 56.5% 97%);
+    --mn-color-success-subtle-hover: hsl(136 56.5% 94%);
+    --mn-color-success-strong: hsl(136 62.8% 22.7%);
+    --mn-color-success-on-strong: hsl(0 0% 100%);
+    --mn-color-success-border: hsl(136 62.8% 22.7%);
+    --mn-color-warning-solid: hsl(44.3 100% 22.3%);
+    --mn-color-warning-solid-hover: hsl(44.3 100% 17.3%);
+    --mn-color-warning-solid-active: hsl(44.3 100% 13.3%);
+    --mn-color-warning-on-solid: hsl(0 0% 100%);
+    --mn-color-warning-subtle: hsl(44.3 81% 97%);
+    --mn-color-warning-subtle-hover: hsl(44.3 81% 94%);
+    --mn-color-warning-strong: hsl(44.3 100% 20.8%);
+    --mn-color-warning-on-strong: hsl(0 0% 100%);
+    --mn-color-warning-border: hsl(44.3 100% 20.8%);
+    --mn-color-info-solid: hsl(197.5 100% 26.1%);
+    --mn-color-info-solid-hover: hsl(197.5 100% 21.1%);
+    --mn-color-info-solid-active: hsl(197.5 100% 17.1%);
+    --mn-color-info-on-solid: hsl(0 0% 100%);
+    --mn-color-info-subtle: hsl(197.5 81% 97%);
+    --mn-color-info-subtle-hover: hsl(197.5 81% 94%);
+    --mn-color-info-strong: hsl(197.5 100% 24.1%);
+    --mn-color-info-on-strong: hsl(0 0% 100%);
+    --mn-color-info-border: hsl(197.5 100% 24.1%);
+    --mn-color-text-link: var(--mn-color-accent-strong);
+    --mn-color-focus-ring: var(--mn-color-text-default);
+    --mn-focus-ring-width: 3px;
+    --mn-color-overlay-scrim: hsl(0 0% 0% / 0.7);
+    --mn-shadow-xs: none;
+    --mn-shadow-sm: none;
+    --mn-shadow-md: 0 0 0 1px hsl(0 0% 0%);
+    --mn-shadow-lg: 0 0 0 2px hsl(0 0% 0%);
+    --mn-shadow-xl: 0 0 0 2px hsl(0 0% 0%);
+    --mn-color-data-1: hsl(214 90% 49%);
+    --mn-color-data-2: hsl(24 94% 49%);
+    --mn-color-data-3: hsl(256 82% 49%);
+    --mn-color-data-4: hsl(330 78% 49%);
+    --mn-color-data-5: hsl(280 68% 49%);
+  }
+
+  .dark[data-mn-contrast="more"],
+  [data-mn-theme="dark"][data-mn-contrast="more"] {
+    color-scheme: dark;
+    --mn-color-bg-canvas: hsl(0 0% 0%);
+    --mn-color-bg-surface: hsl(0 0% 0%);
+    --mn-color-bg-raised: hsl(224 22% 6.5%);
+    --mn-color-bg-subtle: hsl(224 22% 6.5%);
+    --mn-color-bg-muted: hsl(222 18% 10%);
+    --mn-color-bg-emphasis: hsl(221 15% 18%);
+    --mn-color-bg-inverse: hsl(0 0% 100%);
+    --mn-color-text-default: hsl(0 0% 100%);
+    --mn-color-text-muted: hsl(220 13% 92.5%);
+    --mn-color-text-subtle: hsl(220 13% 89%);
+    --mn-color-text-disabled: hsl(220 9% 64%);
+    --mn-color-text-inverse: hsl(0 0% 0%);
+    --mn-color-border-subtle: hsl(220 9% 43.5%);
+    --mn-color-border-default: hsl(220 9% 64%);
+    --mn-color-border-strong: hsl(220 13% 89%);
+    --mn-color-border-input: hsl(220 11% 80%);
+    --mn-color-accent-solid: hsl(354.5 71.3% 70.2%);
+    --mn-color-accent-solid-hover: hsl(354.5 71.3% 75.2%);
+    --mn-color-accent-solid-active: hsl(354.5 71.3% 79.2%);
+    --mn-color-accent-on-solid: hsl(224 22% 6.5%);
+    --mn-color-accent-subtle: hsl(354.5 28.5% 10%);
+    --mn-color-accent-subtle-hover: hsl(354.5 28.5% 14%);
+    --mn-color-accent-strong: hsl(354.5 71.3% 74.7%);
+    --mn-color-accent-on-strong: hsl(224 22% 6.5%);
+    --mn-color-accent-border: hsl(354.5 71.3% 74.7%);
+    --mn-color-danger-solid: hsl(354.5 71.3% 70.2%);
+    --mn-color-danger-solid-hover: hsl(354.5 71.3% 75.2%);
+    --mn-color-danger-solid-active: hsl(354.5 71.3% 79.2%);
+    --mn-color-danger-on-solid: hsl(224 22% 6.5%);
+    --mn-color-danger-subtle: hsl(354.5 28.5% 10%);
+    --mn-color-danger-subtle-hover: hsl(354.5 28.5% 14%);
+    --mn-color-danger-strong: hsl(354.5 71.3% 74.7%);
+    --mn-color-danger-on-strong: hsl(224 22% 6.5%);
+    --mn-color-danger-border: hsl(354.5 71.3% 74.7%);
+    --mn-color-success-solid: hsl(136 62.8% 43.7%);
+    --mn-color-success-solid-hover: hsl(136 62.8% 48.7%);
+    --mn-color-success-solid-active: hsl(136 62.8% 52.7%);
+    --mn-color-success-on-solid: hsl(224 22% 6.5%);
+    --mn-color-success-subtle: hsl(136 25.1% 10%);
+    --mn-color-success-subtle-hover: hsl(136 25.1% 14%);
+    --mn-color-success-strong: hsl(136 62.8% 50.2%);
+    --mn-color-success-on-strong: hsl(224 22% 6.5%);
+    --mn-color-success-border: hsl(136 62.8% 50.2%);
+    --mn-color-warning-solid: hsl(44.3 100% 47.8%);
+    --mn-color-warning-solid-hover: hsl(44.3 100% 52.8%);
+    --mn-color-warning-solid-active: hsl(44.3 100% 56.8%);
+    --mn-color-warning-on-solid: hsl(224 22% 6.5%);
+    --mn-color-warning-subtle: hsl(44.3 40% 10%);
+    --mn-color-warning-subtle-hover: hsl(44.3 40% 14%);
+    --mn-color-warning-strong: hsl(44.3 100% 47.8%);
+    --mn-color-warning-on-strong: hsl(224 22% 6.5%);
+    --mn-color-warning-border: hsl(44.3 100% 47.8%);
+    --mn-color-info-solid: hsl(197.5 100% 46.6%);
+    --mn-color-info-solid-hover: hsl(197.5 100% 51.6%);
+    --mn-color-info-solid-active: hsl(197.5 100% 55.6%);
+    --mn-color-info-on-solid: hsl(224 22% 6.5%);
+    --mn-color-info-subtle: hsl(197.5 40% 10%);
+    --mn-color-info-subtle-hover: hsl(197.5 40% 14%);
+    --mn-color-info-strong: hsl(197.5 100% 56.6%);
+    --mn-color-info-on-strong: hsl(224 22% 6.5%);
+    --mn-color-info-border: hsl(197.5 100% 56.6%);
+    --mn-color-text-link: var(--mn-color-accent-strong);
+    --mn-color-focus-ring: var(--mn-color-text-default);
+    --mn-focus-ring-width: 3px;
+    --mn-color-overlay-scrim: hsl(0 0% 0% / 0.8);
+    --mn-shadow-xs: none;
+    --mn-shadow-sm: none;
+    --mn-shadow-md: 0 0 0 1px hsl(0 0% 100%);
+    --mn-shadow-lg: 0 0 0 2px hsl(0 0% 100%);
+    --mn-shadow-xl: 0 0 0 2px hsl(0 0% 100%);
+    --mn-color-data-1: hsl(214 90% 68%);
+    --mn-color-data-2: hsl(24 94% 68%);
+    --mn-color-data-3: hsl(256 82% 68%);
+    --mn-color-data-4: hsl(330 78% 68%);
+    --mn-color-data-5: hsl(280 68% 68%);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --mn-duration-instant: 0ms;
+      --mn-duration-fast: 0ms;
+      --mn-duration-base: 0ms;
+      --mn-duration-slow: 0ms;
+      --mn-duration-slower: 0ms;
+    }
+  }
+
+}

package/dist/css/products/app.css

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