fulldev-ui 0.7.0-beta.9 → 0.7.0

package/src/styles/global.css

@@ -1,123 +1,231 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --font-sans: 'Geist Sans', sans-serif;
-
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+/* For starlight */
+@layer base, starlight, theme, components, utilities;
+@import "@astrojs/starlight-tailwind";
+
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --spacing: 0.25rem;
+  --text: 1rem;
+  --heading: 2.25rem;
+  --radius: 0.65rem;
+  --container: var(--breakpoint-2xl);
+  --gutter: 24px;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.646 0.222 41.116);
+  --primary-foreground: #fff;
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.75 0.183 55.934);
+  --chart-1: oklch(0.837 0.128 66.29);
+  --chart-2: oklch(0.705 0.213 47.604);
+  --chart-3: oklch(0.646 0.222 41.116);
+  --chart-4: oklch(0.553 0.195 38.402);
+  --chart-5: oklch(0.47 0.157 37.304);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.646 0.222 41.116);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.75 0.183 55.934);
+
+  /* Starlight color palette */
+  --color-gray-50: var(--background);
+  --color-gray-100: var(--muted);
+  --color-gray-200: var(--muted);
+  --color-gray-300: var(--border);
+  --color-gray-400: red;
+  --color-gray-500: var(--muted-foreground);
+  --color-gray-600: var(--muted);
+  --color-gray-700: var(--foreground);
+  --color-gray-800: var(--border);
+  --color-gray-900: var(--foreground);
+  --color-gray-950: red;
+  /* not in tailwind adapter for starlight */
+  --sl-color-gray-1: var(--foreground);
+}
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+[data-theme="dark"],
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.705 0.213 47.604);
+  --primary-foreground: #fff;
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.408 0.123 38.172);
+  --chart-1: oklch(0.837 0.128 66.29);
+  --chart-2: oklch(0.705 0.213 47.604);
+  --chart-3: oklch(0.646 0.222 41.116);
+  --chart-4: oklch(0.553 0.195 38.402);
+  --chart-5: oklch(0.47 0.157 37.304);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.705 0.213 47.604);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.408 0.123 38.172);
+
+  /* Starlight color palette */
+  --color-gray-50: red;
+  --color-gray-100: red;
+  --color-gray-200: var(--foreground); /* themer button */
+  --color-gray-300: var(--foreground); /* sidebar links and docs text */
+  --color-gray-400: var(--muted-foreground); /* toc text */
+  --color-gray-500: red;
+  --color-gray-600: red;
+  --color-gray-700: var(--border); /* border */
+  --color-gray-800: var(--muted); /* sidebar, header, code */
+  --color-gray-900: var(--background); /* body */
+  --color-gray-950: var(--background);
+  --sl-font: "Inter", sans-serif;
+  --__sl-font: "Inter", sans-serif;
+}
 
-    --ring: 222.2 84% 4.9%;
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --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-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* primary color */
+  --color-accent-50: var(--color-orange-50);
+  --color-accent-100: var(--color-orange-100);
+  --color-accent-200: var(--color-orange-200);
+  --color-accent-300: var(--color-orange-300);
+  --color-accent-400: var(--color-orange-400);
+  --color-accent-500: var(--color-orange-500);
+  --color-accent-600: var(--color-orange-600);
+  --color-accent-700: var(--color-orange-700);
+  --color-accent-800: var(--color-orange-800);
+  --color-accent-900: var(--color-orange-900);
+  --color-accent-950: var(--color-orange-950);
+
+  --text-xs: calc(var(--text) - 0.25rem);
+  --text-sm: calc(var(--text) - 0.125rem);
+  --text-base: var(--text);
+  --text-lg: calc(var(--text) + 0.125rem);
+  --text-xl: calc(var(--text) + 0.25rem);
+
+  --text-2xl: calc(var(--heading) * (4 / 6));
+  --text-3xl: calc(var(--heading) * (5 / 6));
+  --text-4xl: var(--heading);
+  --text-5xl: calc(var(--heading) * (8 / 6));
+}
 
-    --radius: 0.5rem;
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
   }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 212.7 26.8% 83.9%;
+  html {
+    @apply bg-background scroll-smooth;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  [data-slot="header"],
+  [data-slot="banner"] {
+    --container: 100%;
+  }
+  [data-slot="logo-image"] {
+    @apply h-6.5!;
   }
 }
 
-/* Miele */
-/* @layer base {
-  :root {
-    --font-sans: 'Geist Sans', sans-serif;
-
-    --background: 0 0% 9%;
-    --foreground: 0 0% 98%;
-
-    --muted: 0 0% 14%;
-    --muted-foreground: 0 0% 80%;
-
-    --popover: 0 0% 14%;
-    --popover-foreground: 0 0% 90%;
-
-    --card: 0 0% 14%;
-    --card-foreground: 0 0% 90%;
-
-    --border: 0 0% 25%;
-    --input: 0 0% 34%;
-
-    --primary: 351 100% 27%;
-    --primary-foreground: 0 0% 100%;
-
-    --secondary: 0 0% 20%;
-    --secondary-foreground: 0 0% 90%;
-
-    --accent: 0 0% 14%;
-    --accent-foreground: 0 0% 90%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+/* Starlight overrides */
+@layer theme {
+  .page {
+    --sl-nav-height: 61px;
+    background-color: var(--background);
+  }
 
-    --ring: 0 0% 70%;
+  .page > .header {
+    @apply bg-background h-16 border-b border-gray-800 py-0!;
+  }
 
-    --radius: 0.3rem;
+  .page > .sidebar > .sidebar-pane {
+    @apply bg-background border-r border-gray-800;
   }
-} */
 
-@layer base {
-  * {
-    @apply border-border;
+  .social-icons {
+    @apply hidden;
   }
-  body {
-    @apply bg-background text-foreground;
+
+  .sl-badge.success.small {
+    @apply inline-flex size-3 scale-50 animate-pulse items-center justify-center rounded-full border-none bg-orange-600 text-orange-600;
   }
 
-  .font-sans {
-    font-synthesis: initial;
-    font-synthesis-weight: auto;
+  :root {
+    --sl-font: "Inter", sans-serif;
+    --__sl-font: "Inter", sans-serif;
   }
 }
+
+@utility inset-y {
+  height: calc(100% + 2 * var(--section-py));
+  margin-top: calc(-1 * var(--section-py));
+  margin-bottom: calc(-1 * var(--section-py));
+}

package/src/styles/global.example.css

@@ -0,0 +1,144 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --spacing: 0.25rem;
+  --text: 1rem;
+  --heading: 2.25rem;
+  --radius: 0.65rem;
+  --container: var(--breakpoint-xl);
+  --gutter: 24px;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --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-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --text-xs: calc(var(--text) - 0.25rem);
+  --text-sm: calc(var(--text) - 0.125rem);
+  --text-base: var(--text);
+  --text-lg: calc(var(--text) + 0.125rem);
+  --text-xl: calc(var(--text) + 0.25rem);
+
+  --text-2xl: calc(var(--heading) * (4 / 6));
+  --text-3xl: calc(var(--heading) * (5 / 6));
+  --text-4xl: var(--heading);
+  --text-5xl: calc(var(--heading) * (8 / 6));
+
+  --font-heading: var(--font-heading);
+  --font-base: var(--font-base);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html {
+    @apply bg-background scroll-smooth;
+  }
+  body {
+    @apply bg-background text-foreground font-base font-heading;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "astro/tsconfigs/strict",
+  "display": "Default",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "exclude": ["node_modules", "dist"]
+}

package/cli.js

@@ -1,51 +0,0 @@
-#! /usr/bin/env node
-import fs from 'fs-extra'
-import path from 'path'
-import { fileURLToPath } from 'url'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-// Items to copy with source and target paths
-const items = [
-  {
-    source: './src/blocks',
-    target: 'src/blocks',
-  },
-  {
-    source: './src/components',
-    target: 'src/components',
-  },
-  {
-    source: './src/lib',
-    target: 'src/lib',
-  },
-  {
-    source: './src/schemas',
-    target: 'src/schemas',
-  },
-  {
-    source: './src/styles',
-    target: 'src/styles',
-  },
-  {
-    source: './components.json',
-    target: 'components.json',
-  },
-  {
-    source: './tailwind.config.js',
-    target: 'tailwind.config.js',
-  },
-]
-
-items.forEach((item) => {
-  const sourcePath = path.join(__dirname, item.source)
-  const targetPath = path.join(process.cwd(), item.target)
-
-  // Create parent directory for files
-  const targetDir = fs.statSync(sourcePath).isDirectory() ? targetPath : path.dirname(targetPath)
-  fs.ensureDirSync(targetDir)
-
-  // Copy item
-  fs.copySync(sourcePath, targetPath)
-  console.log(`${item.target} copied successfully!`)
-})

package/src/blocks/CategoryGroup1.astro

@@ -1,43 +0,0 @@
----
-import Abstract from '@/components/Abstract.astro'
-import Box from '@/components/Box.astro'
-import Container from '@/components/Container.astro'
-import Grid from '@/components/Grid.astro'
-import Image from '@/components/Image.astro'
-import Section from '@/components/Section.astro'
-import Writeup from '@/components/Writeup.astro'
-import type { CategoryGroupSchema } from '@/schemas/blocks/categoryGroup'
-
-interface Props extends CategoryGroupSchema {}
-
-const { title, description, categories } = Astro.props
----
-
-<Section class="categories categories-1">
-  <Container class="flex flex-col gap-8">
-    <Box class="flex w-full items-center justify-between gap-8">
-      <Writeup size="sm">
-        <Box as="h1">{title}</Box>
-        <Box as="p">{description}</Box>
-      </Writeup>
-    </Box>
-    <Grid length={categories?.length}>
-      {
-        categories?.map(({ href, image, title }) => (
-          <Box
-            class="group flex flex-col gap-4"
-            {href}
-          >
-            <Image
-              class="aspect-square rounded-lg transition-opacity group-hover:opacity-75"
-              {...image}
-            />
-            <Abstract>
-              <Box as="h3">{title}</Box>
-            </Abstract>
-          </Box>
-        ))
-      }
-    </Grid>
-  </Container>
-</Section>

package/src/blocks/CategoryList1.astro

@@ -1,55 +0,0 @@
----
-import Abstract from '@/components/Abstract.astro'
-import Box from '@/components/Box.astro'
-import Button from '@/components/Button.astro'
-import Container from '@/components/Container.astro'
-import Grid from '@/components/Grid.astro'
-import Image from '@/components/Image.astro'
-import Section from '@/components/Section.astro'
-import Writeup from '@/components/Writeup.astro'
-import type { CategoryListSchema } from '@/schemas/blocks/categoryList'
-
-interface Props extends CategoryListSchema {}
-
-const { writeup, button, categories } = Astro.props
----
-
-<Section class="categories categories-1">
-  <Container class="flex flex-col gap-8">
-    <Box class="flex w-full items-center justify-between gap-8">
-      <Writeup size="sm">
-        <Fragment set:html={writeup} />
-        <slot />
-      </Writeup>
-      <Button
-        class="max-lg:hidden"
-        variant="link"
-        reverse
-        {...button}
-      />
-    </Box>
-    <Grid length={categories?.length}>
-      {
-        categories?.map(({ href, image, title }) => (
-          <Box
-            class="group flex flex-col gap-4"
-            {href}
-          >
-            <Image
-              class="aspect-square rounded-lg transition-opacity group-hover:opacity-75"
-              {...image}
-            />
-            <Abstract>
-              <Box as="h3">{title}</Box>
-            </Abstract>
-          </Box>
-        ))
-      }
-    </Grid>
-    <Button
-      class="lg:hidden"
-      variant="secondary"
-      {...button}
-    />
-  </Container>
-</Section>