@moldea.ai/website-ui 1.0.0

package/src/styles.css

@@ -0,0 +1,248 @@
+@import 'tailwindcss';
+@import '@fontsource-variable/ubuntu-sans/wght.css';
+@import './tokens.css';
+
+@source './components/**/*.{astro,ts}';
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  html {
+    @apply bg-background font-sans text-foreground antialiased;
+    color-scheme: light;
+    scroll-behavior: smooth;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  body {
+    @apply min-w-80 bg-background text-foreground;
+    margin: 0;
+    overflow-wrap: break-word;
+  }
+
+  ::selection {
+    @apply bg-primary text-primary-foreground;
+  }
+
+  a,
+  button,
+  summary,
+  select,
+  input {
+    @apply outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+  }
+
+  button:not(:disabled),
+  summary,
+  select {
+    cursor: pointer;
+  }
+}
+
+@layer components {
+  .page-shell {
+    width: min(100%, 82rem);
+    margin-inline: auto;
+    padding-inline: var(--spacing-page-gutter);
+  }
+
+  .docs-shell {
+    width: min(100%, 94rem);
+    margin-inline: auto;
+    padding-inline: var(--spacing-page-gutter);
+  }
+
+  .eyebrow {
+    @apply text-xs font-bold tracking-[0.16em] text-muted-foreground uppercase;
+  }
+
+  .display-title {
+    font-size: clamp(2.65rem, 9vw, 6.6rem);
+    line-height: 0.91;
+    letter-spacing: -0.065em;
+  }
+
+  .section-title {
+    font-size: clamp(2rem, 5vw, 4.25rem);
+    line-height: 0.98;
+    letter-spacing: -0.045em;
+  }
+
+  .surface-card {
+    @apply rounded-xl border border-border bg-card shadow-surface;
+  }
+
+  .interactive-card {
+    @apply transition duration-200 ease-out hover:-translate-y-0.5 hover:border-foreground/25 active:translate-y-px motion-reduce:transform-none motion-reduce:transition-none;
+  }
+
+  .action-control {
+    @apply inline-flex shrink-0 items-center justify-center rounded-lg border bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-transparent! focus-visible:shadow-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background not-disabled:not-aria-disabled:active:not-aria-[haspopup]:translate-y-px disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 motion-reduce:transition-none dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  .action-primary {
+    @apply border-transparent bg-primary text-primary-foreground not-disabled:not-aria-disabled:hover:bg-primary/80 dark:not-disabled:not-aria-disabled:hover:bg-primary/30;
+  }
+
+  .action-outline {
+    @apply border-border bg-background text-foreground not-disabled:not-aria-disabled:hover:bg-secondary not-disabled:not-aria-disabled:hover:text-foreground aria-expanded:bg-secondary aria-expanded:text-foreground dark:bg-border/30 dark:not-disabled:not-aria-disabled:hover:bg-border/50;
+  }
+
+  .action-secondary {
+    @apply border-transparent bg-secondary text-foreground not-disabled:not-aria-disabled:hover:bg-secondary/70 aria-expanded:bg-secondary aria-expanded:text-foreground;
+  }
+
+  .action-ghost {
+    @apply border-transparent bg-transparent text-foreground not-disabled:not-aria-disabled:hover:bg-secondary not-disabled:not-aria-disabled:hover:text-foreground aria-expanded:bg-secondary aria-expanded:text-foreground dark:not-disabled:not-aria-disabled:hover:bg-secondary/50;
+  }
+
+  .action-link {
+    @apply border-transparent bg-transparent px-0! text-primary underline-offset-4 not-disabled:not-aria-disabled:hover:underline dark:text-primary-foreground dark:not-disabled:not-aria-disabled:hover:text-primary-foreground/80;
+  }
+
+  .action-size-sm {
+    @apply min-h-8 gap-1.5 px-3 py-1.5 text-sm;
+  }
+
+  .action-size-md {
+    @apply min-h-10 gap-2 px-4 py-2 text-sm;
+  }
+
+  .action-size-lg {
+    @apply min-h-12 gap-2 px-5 py-3;
+  }
+
+  .action-size-icon {
+    @apply size-10;
+  }
+
+  .prose-moldea {
+    @apply min-w-0 text-[1.05rem] leading-8 text-foreground;
+  }
+
+  .prose-moldea > :first-child {
+    margin-top: 0;
+  }
+
+  .prose-moldea :is(h2, h3, h4) {
+    @apply scroll-mt-24 font-heading font-semibold tracking-tight text-foreground;
+  }
+
+  .prose-moldea h2 {
+    @apply mt-14 mb-5 border-t pt-10 text-3xl;
+  }
+
+  .prose-moldea > h2:first-child {
+    @apply mt-0 border-t-0 pt-0;
+  }
+
+  .prose-moldea h3 {
+    @apply mt-10 mb-4 text-2xl;
+  }
+
+  .prose-moldea h4 {
+    @apply mt-8 mb-3 text-xl;
+  }
+
+  .prose-moldea :is(p, ul, ol, table, pre, blockquote) {
+    @apply my-5;
+  }
+
+  .prose-moldea :is(ul, ol) {
+    @apply space-y-2 ps-6;
+  }
+
+  .prose-moldea ul {
+    list-style: disc;
+  }
+
+  .prose-moldea ol {
+    list-style: decimal;
+  }
+
+  .prose-moldea a,
+  .text-link {
+    @apply font-medium text-link underline decoration-link/40 underline-offset-4 hover:decoration-current;
+  }
+
+  .prose-moldea code:not(pre code) {
+    @apply rounded-md bg-code px-1.5 py-1 font-mono text-[0.86em] font-semibold text-code-foreground;
+  }
+
+  .prose-moldea pre {
+    @apply max-w-full overflow-x-auto rounded-xl border bg-code p-5 text-sm leading-6 text-code-foreground shadow-inset;
+  }
+
+  .prose-moldea-wrap-code pre {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  .prose-moldea .shiki,
+  .prose-moldea .shiki code {
+    background: transparent !important;
+  }
+
+  .prose-moldea .shiki span {
+    color: var(--shiki-light);
+  }
+
+  .dark .prose-moldea .shiki span {
+    color: var(--shiki-dark);
+  }
+
+  .prose-moldea blockquote {
+    @apply rounded-r-lg border-s-4 bg-accent px-5 py-1 text-accent-foreground;
+  }
+
+  .prose-moldea table {
+    @apply w-full border-collapse text-sm;
+  }
+
+  .prose-moldea th {
+    @apply bg-muted text-start font-semibold text-foreground;
+  }
+
+  .prose-moldea :is(th, td) {
+    @apply border px-3 py-2.5 align-top;
+  }
+
+  .table-scroll {
+    @apply my-5 max-w-full overflow-x-auto rounded-xl border focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not(.light):not(.dark) {
+    color-scheme: dark;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none !important;
+  }
+
+  .action-control:not(:disabled):not([aria-disabled='true']):active:not([aria-haspopup]) {
+    translate: none;
+  }
+
+  .interactive-card:active {
+    translate: none;
+  }
+
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}

package/src/theme/index.ts

@@ -0,0 +1,19 @@
+// persisted website theme choices
+export type IThemePreference = 'dark' | 'light' | 'system';
+
+/**
+ * Normalizes an unknown persisted preference to a supported theme choice.
+ * @param value Persisted storage value.
+ * @returns A supported explicit or system preference.
+ */
+export const parseThemePreference = (value: unknown): IThemePreference =>
+  value === 'dark' || value === 'light' || value === 'system' ? value : 'system';
+
+/**
+ * Resolves whether the effective theme should be dark.
+ * @param preference Explicit or system theme preference.
+ * @param doesSystemPreferDark Current operating-system preference.
+ * @returns Whether the effective website theme is dark.
+ */
+export const isDarkTheme = (preference: IThemePreference, doesSystemPreferDark: boolean): boolean =>
+  preference === 'dark' || (preference === 'system' && doesSystemPreferDark);

package/src/tokens.css

@@ -0,0 +1,155 @@
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --font-sans: 'Ubuntu Sans Variable', sans-serif;
+  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-elevated: var(--elevated);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-destructive: var(--destructive);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-link: var(--link);
+  --color-code: var(--code-background);
+  --color-code-foreground: var(--code-foreground);
+
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+
+  --spacing-control-xs: 1.5rem;
+  --spacing-control-sm: 1.75rem;
+  --spacing-control-md: 2rem;
+  --spacing-control-lg: 2.25rem;
+  --spacing-page-gutter: clamp(1rem, 2vw, 2rem);
+  --spacing-section-gap: clamp(2rem, 5vw, 4rem);
+
+  --shadow-xs: var(--shadow-xs-value);
+  --shadow-sm: var(--shadow-sm-value);
+  --shadow-md: var(--shadow-md-value);
+  --shadow-lg: var(--shadow-lg-value);
+  --shadow-xl: var(--shadow-xl-value);
+  --shadow-raised: var(--shadow-raised-value);
+  --shadow-surface: var(--shadow-surface-value);
+  --shadow-inset: var(--shadow-inset-value);
+}
+
+:root {
+  --shadow-xs-value: 0 1px 2px oklch(0.18 0.018 215 / 8%);
+  --shadow-sm-value:
+    0 1px 2px oklch(18.142% 0.01839 215.333 / 4%),
+    0 8px 20px -14px oklch(18.142% 0.01839 215.333 / 10%);
+  --shadow-md-value:
+    0 2px 4px oklch(18.142% 0.01839 215.333 / 5%),
+    0 12px 28px -16px oklch(18.142% 0.01839 215.333 / 14%);
+  --shadow-lg-value:
+    0 4px 8px oklch(18.142% 0.01839 215.333 / 6%),
+    0 18px 40px -18px oklch(18.142% 0.01839 215.333 / 16%);
+  --shadow-xl-value:
+    0 8px 16px oklch(18.142% 0.01839 215.333 / 7%),
+    0 24px 56px -24px oklch(18.142% 0.01839 215.333 / 20%);
+  --shadow-surface-value: var(--shadow-sm-value);
+  --shadow-raised-value: var(--shadow-md-value);
+  --shadow-inset-value:
+    inset 0 1px 0 oklch(100% 0.00011 271.152 / 82%), 0 1px 2px oklch(18.142% 0.01839 215.333 / 6%);
+
+  --background: oklch(99.426% 0.00274 84.294);
+  --foreground: oklch(18.142% 0.01839 215.333);
+  --card: var(--background);
+  --elevated: oklch(100% 0.00011 271.152);
+  --primary: oklch(15.434% 0.00002 271.152);
+  --primary-foreground: oklch(99.048% 0.00493 166.268);
+  --secondary: oklch(96.563% 0.00641 197.995);
+  --secondary-foreground: oklch(48.046% 0.02817 216.324);
+  --muted: var(--secondary);
+  --muted-foreground: var(--secondary-foreground);
+  --accent: var(--secondary);
+  --accent-foreground: var(--foreground);
+  --destructive: oklch(58.042% 0.2304 27.044);
+  --border: oklch(89.894% 0.01222 210.227);
+  --input: var(--border);
+  --ring: var(--foreground);
+  --warning: oklch(77.997% 0.15037 75.683);
+  --warning-foreground: oklch(30% 0.075 65);
+  --success: var(--foreground);
+  --success-foreground: var(--background);
+  --info: oklch(55.927% 0.13086 255.341);
+  --info-foreground: oklch(99% 0.005 255);
+  --sidebar: oklch(97.8% 0.005 198);
+  --sidebar-foreground: var(--foreground);
+  --link: oklch(42% 0.12 255.341);
+  --code-background: oklch(95.1% 0.007 226);
+  --code-foreground: oklch(20% 0.026 232);
+  --syntax-comment: oklch(51% 0.024 220);
+  --syntax-keyword: oklch(47% 0.15 301);
+  --syntax-string: oklch(43% 0.1 154);
+  --syntax-function: oklch(42% 0.13 255);
+  --radius: 0.625rem;
+}
+
+.dark {
+  --shadow-xs-value: 0 0 oklch(0% 0 0 / 0%);
+  --shadow-sm-value: 0 0 oklch(0% 0 0 / 0%);
+  --shadow-md-value: 0 0 oklch(0% 0 0 / 0%);
+  --shadow-lg-value: 0 0 oklch(0% 0 0 / 0%);
+  --shadow-xl-value: 0 0 oklch(0% 0 0 / 0%);
+  --shadow-surface-value: var(--shadow-sm-value);
+  --shadow-raised-value: var(--shadow-md-value);
+  --shadow-inset-value: inset 0 0 oklch(0% 0 0 / 0%);
+
+  --background: oklch(27.837% 0.03355 257.693);
+  --foreground: oklch(97.024% 0.00684 124.958);
+  --card: var(--background);
+  --elevated: oklch(31.5% 0.034 258);
+  --primary: oklch(15.434% 0.00002 271.152);
+  --primary-foreground: oklch(99.048% 0.00493 166.268);
+  --secondary: oklch(37.306% 0.03436 260.191);
+  --secondary-foreground: oklch(83.038% 0.0135 209.117);
+  --muted: var(--secondary);
+  --muted-foreground: var(--secondary-foreground);
+  --accent: var(--secondary);
+  --accent-foreground: var(--foreground);
+  --destructive: oklch(70.008% 0.19081 23.736);
+  --border: oklch(100% 0.00011 271.152 / 25.9%);
+  --input: var(--border);
+  --ring: var(--foreground);
+  --warning: oklch(83.007% 0.1399 77.932);
+  --warning-foreground: oklch(25% 0.07 65);
+  --success: var(--foreground);
+  --success-foreground: var(--background);
+  --info: oklch(71.903% 0.11999 254.944);
+  --info-foreground: oklch(20% 0.05 255);
+  --sidebar: oklch(25.3% 0.031 258);
+  --sidebar-foreground: var(--foreground);
+  --link: oklch(78% 0.1 244);
+  --code-background: oklch(23.8% 0.027 258);
+  --code-foreground: oklch(94% 0.01 215);
+  --syntax-comment: oklch(72% 0.025 220);
+  --syntax-keyword: oklch(78% 0.12 310);
+  --syntax-string: oklch(80% 0.11 150);
+  --syntax-function: oklch(78% 0.1 250);
+}