@caqophony/ui 0.3.1 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caqophony/ui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Generic, optional React UI reuse library (Gossamer tokens). Centrally maintained by Caqophony.",
   "license": "MIT",
   "author": "Caqophony",
@@ -36,6 +36,22 @@
       "types": "./dist/markdown.d.mts",
       "import": "./dist/markdown.js"
     },
+    "./marketing": {
+      "types": "./dist/marketing.d.mts",
+      "import": "./dist/marketing.js"
+    },
+    "./material": {
+      "types": "./dist/material.d.mts",
+      "import": "./dist/material.js"
+    },
+    "./material-tones": {
+      "types": "./dist/material-tones.d.mts",
+      "import": "./dist/material-tones.js"
+    },
+    "./material-art": {
+      "types": "./dist/material-art.d.mts",
+      "import": "./dist/material-art.js"
+    },
     "./styles.css": "./styles.css",
     "./package.json": "./package.json"
   },
@@ -54,7 +70,8 @@
     "lucide-react": "^0.446.0",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0",
-    "tailwind-merge": "^2.5.2"
+    "tailwind-merge": "^2.5.2",
+    "@tailwindcss/typography": "^0.5.15"
   },
   "peerDependencies": {
     "chart.js": "^4.5.1",

package/styles.css

@@ -260,6 +260,35 @@
   transition-duration: var(--duration-drawer);
 }
 
+@utility text-display-poster {
+  font-size: clamp(3rem, 1.05rem + 8vw, 7rem);
+  line-height: 0.98;
+  letter-spacing: -0.035em;
+  font-weight: 700;
+  text-wrap: balance;
+  overflow-wrap: break-word;
+}
+@utility text-display-headline {
+  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
+  line-height: 1.04;
+  letter-spacing: -0.03em;
+  font-weight: 700;
+  text-wrap: balance;
+  overflow-wrap: break-word;
+}
+@utility text-display-title {
+  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  font-weight: 700;
+  text-wrap: balance;
+  overflow-wrap: break-word;
+}
+@utility text-lede {
+  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
+  line-height: 1.5;
+}
+
 [data-page-surface='marketing'] {
   --page-bg: var(--background);
   --section-band: color-mix(in srgb, hsl(var(--foreground)) 8%, hsl(var(--background)));
@@ -271,19 +300,21 @@
 [data-page-surface='marketing'] section:not([data-page-surface='marketing'] section section):is(.bg-page-bg, .bg-muted, .bg-background, .bg-card, :not([class*='bg-'])):nth-of-type(even) {
   background-color: var(--section-band);
 }
-[data-page-surface='marketing'] h1 {
+[data-page-surface='marketing'] h1:not([class*='text-display-poster'], [class*='text-display-headline'], [class*='text-display-title'], [class*='text-lede']) {
   font-size: clamp(2.25rem, 1.35rem + 3.8vw, 3.25rem);
   line-height: 1.08;
   font-weight: 700;
   letter-spacing: -0.025em;
   text-wrap: balance;
 }
-[data-page-surface='marketing'] h1 + p {
+[data-page-surface='marketing'] h1 + p:not([class*='text-display-poster'], [class*='text-display-headline'], [class*='text-display-title'], [class*='text-lede']) {
   font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
   line-height: 1.6;
+}
+[data-page-surface='marketing'] h1 + p {
   margin-top: 0.75rem;
 }
-[data-page-surface='marketing'] h2 {
+[data-page-surface='marketing'] h2:not([class*='text-display-poster'], [class*='text-display-headline'], [class*='text-display-title'], [class*='text-lede']) {
   font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
   line-height: 1.15;
   font-weight: 700;
@@ -297,3 +328,327 @@
   display: inline-flex;
   margin-top: 2rem;
 }
+@layer base {
+  [data-page-surface='marketing'] h1 {
+  font-size: clamp(2.25rem, 1.35rem + 3.8vw, 3.25rem);
+  line-height: 1.08;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  text-wrap: balance;
+  }
+  [data-page-surface='marketing'] h1 + p {
+  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
+  line-height: 1.6;
+  }
+  [data-page-surface='marketing'] h2 {
+  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
+  line-height: 1.15;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+  }
+}
+
+@plugin '@tailwindcss/typography';
+
+:root {
+  --brand-accent: 161 66% 36%;
+  --brand-accent-foreground: 240 10% 4%;
+  --night-0: 160 35% 13%;
+  --night-1: 160 48% 22%;
+  --night-2: 160 59% 30%;
+  --sky-0: 161 66% 36%;
+  --sky-1: 159 51% 44%;
+  --sky-2: 158 44% 50%;
+  --sky-3: 157 49% 56%;
+  --sky-4: 157 56% 61%;
+  --glow: 157 62% 65%;
+  --glow-soft: 153 60% 83%;
+  --glow-pale: 153 61% 93%;
+  --canvas: 150 33% 98%;
+  --mist-1: 153 33% 95%;
+  --mist-2: 152 31% 88%;
+  --mist-3: 153 32% 79%;
+  --night-foreground: 150 33% 96%;
+  --night-muted-foreground: 151 32% 83%;
+  --night-card: 159 44% 19%;
+  --night-muted: 157 27% 26%;
+  --night-border: 156 21% 40%;
+  --night-accent: 161 66% 41%;
+  --night-accent-foreground: 240 10% 4%;
+  --night-accent-text: 161 67% 51%;
+  --brand-fill: 158 36% 10%;
+  --brand-fill-foreground: 0 0% 100%;
+  --paper: 0 0% 100%;
+  --ink: 240 10% 4%;
+}
+
+:root, [class~='dark'], [data-theme-scope] {
+  --day-background: var(--background);
+  --day-foreground: var(--foreground);
+  --day-card: var(--card);
+  --day-card-foreground: var(--card-foreground);
+  --day-popover: var(--popover);
+  --day-popover-foreground: var(--popover-foreground);
+  --day-border: var(--border);
+  --day-input: var(--input);
+  --day-ring: var(--ring);
+  --day-muted: var(--muted);
+  --day-muted-foreground: var(--muted-foreground);
+  --day-secondary: var(--secondary);
+  --day-secondary-foreground: var(--secondary-foreground);
+  --day-accent: var(--accent);
+  --day-accent-foreground: var(--accent-foreground);
+  --day-destructive: var(--destructive);
+  --day-destructive-foreground: var(--destructive-foreground);
+  --day-primary: var(--primary);
+  --day-primary-foreground: var(--primary-foreground);
+  --day-intent-success: var(--intent-success);
+  --day-intent-success-fg: var(--intent-success-fg);
+  --day-intent-success-border: var(--intent-success-border);
+  --day-intent-warning: var(--intent-warning);
+  --day-intent-warning-fg: var(--intent-warning-fg);
+  --day-intent-warning-border: var(--intent-warning-border);
+  --day-intent-error: var(--intent-error);
+  --day-intent-error-fg: var(--intent-error-fg);
+  --day-intent-error-border: var(--intent-error-border);
+  --day-intent-info: var(--intent-info);
+  --day-intent-info-fg: var(--intent-info-fg);
+  --day-intent-info-border: var(--intent-info-border);
+  --day-status-action: var(--status-action);
+  --day-status-action-fg: var(--status-action-fg);
+  --day-status-waiting: var(--status-waiting);
+  --day-status-waiting-fg: var(--status-waiting-fg);
+  --day-status-critical: var(--status-critical);
+  --day-status-critical-fg: var(--status-critical-fg);
+  --day-status-info: var(--status-info);
+  --day-status-info-fg: var(--status-info-fg);
+  --day-primary-text: var(--primary-text);
+  --day-primary-solid: var(--primary-solid);
+  --day-intent-success-solid: var(--intent-success-solid);
+  --day-intent-success-solid-fg: var(--intent-success-solid-fg);
+  --day-intent-warning-solid: var(--intent-warning-solid);
+  --day-intent-warning-solid-fg: var(--intent-warning-solid-fg);
+  --day-intent-error-solid: var(--intent-error-solid);
+  --day-intent-error-solid-fg: var(--intent-error-solid-fg);
+  --day-intent-info-solid: var(--intent-info-solid);
+  --day-intent-info-solid-fg: var(--intent-info-solid-fg);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --brand-accent: 161 66% 36%;
+    --brand-accent-foreground: 240 10% 4%;
+    --night-0: 160 35% 13%;
+    --night-1: 160 48% 22%;
+    --night-2: 160 59% 30%;
+    --sky-0: 161 66% 36%;
+    --sky-1: 159 51% 44%;
+    --sky-2: 158 44% 50%;
+    --sky-3: 157 49% 56%;
+    --sky-4: 157 56% 61%;
+    --glow: 157 62% 65%;
+    --glow-soft: 153 60% 83%;
+    --glow-pale: 160 23% 15%;
+    --canvas: 180 12% 5%;
+    --mist-1: 170 18% 7%;
+    --mist-2: 163 27% 10%;
+    --mist-3: 159 39% 15%;
+    --night-foreground: 150 33% 96%;
+    --night-muted-foreground: 151 32% 83%;
+    --night-card: 159 44% 19%;
+    --night-muted: 157 27% 26%;
+    --night-border: 156 21% 40%;
+    --night-accent: 161 66% 41%;
+    --night-accent-foreground: 240 10% 4%;
+    --night-accent-text: 161 67% 51%;
+    --brand-fill: 158 36% 10%;
+    --brand-fill-foreground: 0 0% 100%;
+    --paper: 0 0% 100%;
+    --ink: 240 10% 4%;
+  }
+}
+
+@theme inline {
+  --color-brand-accent: hsl(var(--brand-accent));
+  --color-brand-accent-foreground: hsl(var(--brand-accent-foreground));
+  --color-night-0: hsl(var(--night-0));
+  --color-night-1: hsl(var(--night-1));
+  --color-night-2: hsl(var(--night-2));
+  --color-sky-0: hsl(var(--sky-0));
+  --color-sky-1: hsl(var(--sky-1));
+  --color-sky-2: hsl(var(--sky-2));
+  --color-sky-3: hsl(var(--sky-3));
+  --color-sky-4: hsl(var(--sky-4));
+  --color-glow: hsl(var(--glow));
+  --color-glow-soft: hsl(var(--glow-soft));
+  --color-glow-pale: hsl(var(--glow-pale));
+  --color-canvas: hsl(var(--canvas));
+  --color-mist-1: hsl(var(--mist-1));
+  --color-mist-2: hsl(var(--mist-2));
+  --color-mist-3: hsl(var(--mist-3));
+  --color-night-foreground: hsl(var(--night-foreground));
+  --color-night-muted-foreground: hsl(var(--night-muted-foreground));
+  --color-night-card: hsl(var(--night-card));
+  --color-night-muted: hsl(var(--night-muted));
+  --color-night-border: hsl(var(--night-border));
+  --color-night-accent: hsl(var(--night-accent));
+  --color-night-accent-foreground: hsl(var(--night-accent-foreground));
+  --color-night-accent-text: hsl(var(--night-accent-text));
+  --color-brand-fill: hsl(var(--brand-fill));
+  --color-brand-fill-foreground: hsl(var(--brand-fill-foreground));
+  --color-paper: hsl(var(--paper));
+  --color-ink: hsl(var(--ink));
+}
+
+[data-surface='night'] {
+  --background: var(--night-0);
+  --foreground: var(--night-foreground);
+  --card: var(--night-card);
+  --card-foreground: var(--night-foreground);
+  --popover: var(--night-card);
+  --popover-foreground: var(--night-foreground);
+  --border: var(--night-border);
+  --input: var(--night-border);
+  --ring: var(--night-accent);
+  --muted: var(--night-muted);
+  --muted-foreground: var(--night-muted-foreground);
+  --secondary: var(--night-muted);
+  --secondary-foreground: var(--night-foreground);
+  --accent: var(--night-muted);
+  --accent-foreground: var(--night-foreground);
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 0 0% 100%;
+  --primary: var(--night-accent);
+  --primary-foreground: var(--night-accent-foreground);
+  --intent-success: 142 76% 36%;
+  --intent-success-fg: 142 69% 58%;
+  --intent-success-border: 142 71% 45%;
+  --intent-warning: 32 95% 44%;
+  --intent-warning-fg: 43 96% 56%;
+  --intent-warning-border: 38 92% 50%;
+  --intent-error: 0 72% 51%;
+  --intent-error-fg: 0 91% 71%;
+  --intent-error-border: 0 84% 60%;
+  --intent-info: 199 89% 48%;
+  --intent-info-fg: 198 93% 60%;
+  --intent-info-border: 199 89% 48%;
+  --status-action: 262 83% 58%;
+  --status-action-fg: 255 92% 76%;
+  --status-waiting: 32 95% 44%;
+  --status-waiting-fg: 43 96% 56%;
+  --status-critical: 0 72% 51%;
+  --status-critical-fg: 0 91% 71%;
+  --status-info: 199 89% 48%;
+  --status-info-fg: 198 93% 60%;
+  --primary-text: var(--night-accent-text);
+  --primary-solid: var(--night-accent);
+  --intent-success-solid: 142 77% 30%;
+  --intent-success-solid-fg: 0 0% 100%;
+  --intent-warning-solid: 32 95% 36%;
+  --intent-warning-solid-fg: 0 0% 100%;
+  --intent-error-solid: 0 72% 51%;
+  --intent-error-solid-fg: 0 0% 100%;
+  --intent-info-solid: 199 88% 37%;
+  --intent-info-solid-fg: 0 0% 100%;
+  color: hsl(var(--foreground));
+}
+
+[data-surface='day'] {
+  --background: var(--day-background);
+  --foreground: var(--day-foreground);
+  --card: var(--day-card);
+  --card-foreground: var(--day-card-foreground);
+  --popover: var(--day-popover);
+  --popover-foreground: var(--day-popover-foreground);
+  --border: var(--day-border);
+  --input: var(--day-input);
+  --ring: var(--day-ring);
+  --muted: var(--day-muted);
+  --muted-foreground: var(--day-muted-foreground);
+  --secondary: var(--day-secondary);
+  --secondary-foreground: var(--day-secondary-foreground);
+  --accent: var(--day-accent);
+  --accent-foreground: var(--day-accent-foreground);
+  --destructive: var(--day-destructive);
+  --destructive-foreground: var(--day-destructive-foreground);
+  --primary: var(--day-primary);
+  --primary-foreground: var(--day-primary-foreground);
+  --intent-success: var(--day-intent-success);
+  --intent-success-fg: var(--day-intent-success-fg);
+  --intent-success-border: var(--day-intent-success-border);
+  --intent-warning: var(--day-intent-warning);
+  --intent-warning-fg: var(--day-intent-warning-fg);
+  --intent-warning-border: var(--day-intent-warning-border);
+  --intent-error: var(--day-intent-error);
+  --intent-error-fg: var(--day-intent-error-fg);
+  --intent-error-border: var(--day-intent-error-border);
+  --intent-info: var(--day-intent-info);
+  --intent-info-fg: var(--day-intent-info-fg);
+  --intent-info-border: var(--day-intent-info-border);
+  --status-action: var(--day-status-action);
+  --status-action-fg: var(--day-status-action-fg);
+  --status-waiting: var(--day-status-waiting);
+  --status-waiting-fg: var(--day-status-waiting-fg);
+  --status-critical: var(--day-status-critical);
+  --status-critical-fg: var(--day-status-critical-fg);
+  --status-info: var(--day-status-info);
+  --status-info-fg: var(--day-status-info-fg);
+  --primary-text: var(--day-primary-text);
+  --primary-solid: var(--day-primary-solid);
+  --intent-success-solid: var(--day-intent-success-solid);
+  --intent-success-solid-fg: var(--day-intent-success-solid-fg);
+  --intent-warning-solid: var(--day-intent-warning-solid);
+  --intent-warning-solid-fg: var(--day-intent-warning-solid-fg);
+  --intent-error-solid: var(--day-intent-error-solid);
+  --intent-error-solid-fg: var(--day-intent-error-solid-fg);
+  --intent-info-solid: var(--day-intent-info-solid);
+  --intent-info-solid-fg: var(--day-intent-info-solid-fg);
+  color: hsl(var(--foreground));
+}
+
+
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale(var(--tw-enter-scale, 1));
+  }
+}
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale(var(--tw-exit-scale, 1));
+  }
+}
+@utility animate-in {
+  animation-name: enter;
+  animation-duration: 150ms;
+}
+@utility animate-out {
+  animation-name: exit;
+  animation-duration: 150ms;
+}
+@utility fade-in-0 {
+  --tw-enter-opacity: 0;
+}
+@utility fade-out-0 {
+  --tw-exit-opacity: 0;
+}
+@utility zoom-in-95 {
+  --tw-enter-scale: 0.95;
+}
+@utility zoom-out-95 {
+  --tw-exit-scale: 0.95;
+}
+@utility slide-in-from-top-2 {
+  --tw-enter-translate-y: -0.5rem;
+}
+@utility slide-in-from-bottom-2 {
+  --tw-enter-translate-y: 0.5rem;
+}
+@utility slide-in-from-left-2 {
+  --tw-enter-translate-x: -0.5rem;
+}
+@utility slide-in-from-right-2 {
+  --tw-enter-translate-x: 0.5rem;
+}