@lupinum/ginko-docs 0.3.0-rc.5 → 0.3.0

package/README.md

@@ -13,7 +13,7 @@
 </p>
 
 > [!WARNING]
-> This package is pre-1.0. Install `0.3.0-rc.5` from the npm `next` channel for evaluation.
+> This package is stable in the 0.3 release line. Because it is pre-1.0, a later minor release can contain breaking changes.
 
 ## Purpose
 
@@ -29,7 +29,7 @@ Use this package when a Nuxt application needs documentation routes, navigation,
 ## Installation
 
 ```bash
-pnpm add -D @lupinum/ginko-docs@0.3.0-rc.5 @lupinum/ginko-content@0.4.0-rc.2
+pnpm add -D @lupinum/ginko-docs@0.3.0 @lupinum/ginko-content@0.4.0-rc.2
 ```
 
 ```ts

package/app/app.config.ts

@@ -4,6 +4,7 @@ export default {
     theme: {
       neutral: "zinc",
       primary: "neutral",
+      codeBlocks: "dark",
     },
     prose: {
       appearance: "tint",

package/app/assets/css/prose.css

@@ -5,7 +5,7 @@
   --content-prose-heading-foreground: color-mix(in oklab, var(--foreground) 90%, transparent);
   /* Inline code belongs to its surrounding surface; monospace type carries
      the distinction without adding a nested chip background. */
-  --content-prose-inline-code-background: transparent;
+  --content-prose-inline-code-background: var(--background);
   --content-prose-inline-code-foreground: var(--foreground);
   --content-prose-code-highlight-border: var(--code-border);
   /* Kept light enough that Shiki's light-plus tokens stay WCAG AA on top. */
@@ -303,6 +303,7 @@
   border-radius: max(0.3125rem, calc(var(--radius) - 5px));
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
+  border: 1px solid color-mix(in oklab, var(--foreground) 15%, transparent);
   background-color: var(--content-prose-inline-code-background, var(--muted));
   color: var(--content-prose-inline-code-foreground, var(--foreground));
   /* em-based so chips scale with tables, callouts, and body text alike */
@@ -420,6 +421,37 @@ html.dark .shiki span {
   text-decoration: var(--shiki-dark-text-decoration, inherit) !important;
 }
 
+/* Code blocks default to a stable dark presentation in either page theme.
+   "adaptive" leaves these local tokens unset and follows the page tokens. */
+html[data-code-blocks="dark"] :where(.content-codeblock, .content-codegroup, .content-code-tree) {
+  --background: var(--theme-neutral-950);
+  --foreground: var(--theme-neutral-50);
+  --card: var(--theme-neutral-900);
+  --card-foreground: var(--theme-neutral-50);
+  --primary: var(--theme-primary-dark);
+  --primary-foreground: var(--theme-primary-dark-foreground);
+  --secondary: var(--theme-neutral-800);
+  --secondary-foreground: var(--theme-neutral-50);
+  --muted: var(--theme-neutral-800);
+  --muted-foreground: var(--theme-neutral-400);
+  --accent: var(--theme-neutral-800);
+  --accent-foreground: var(--theme-neutral-50);
+  --code: var(--theme-neutral-900);
+  --code-foreground: var(--theme-neutral-50);
+  --code-border: var(--theme-neutral-800);
+  --border: var(--theme-neutral-800);
+  --input: var(--theme-neutral-700);
+  --ring: var(--theme-primary-dark-ring);
+}
+
+html[data-code-blocks="dark"] .content-codeblock.shiki span {
+  background-color: var(--shiki-dark-bg, transparent);
+  color: var(--shiki-dark) !important;
+  font-style: var(--shiki-dark-font-style, inherit) !important;
+  font-weight: var(--shiki-dark-font-weight, inherit) !important;
+  text-decoration: var(--shiki-dark-text-decoration, inherit) !important;
+}
+
 [data-fd-codeblock] {
   background-color: var(--secondary);
   color: var(--foreground);

package/app/components/site/ModeToggle.vue

@@ -1,20 +1,18 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue";
-import { Button } from "#ginko-docs/components/ui/button";
 import { computed } from "vue";
 import { useColorMode, useI18n } from "#imports";
 import { cn } from "#ginko-docs/utils";
+import { headerUtilityButtonClass } from "#ginko-docs/components/site/header-utils";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "#ginko-docs/components/ui/dropdown-menu";
+  nextColorModePreference,
+  themeToggleIcon,
+  themeToggleLabelKey,
+} from "#ginko-docs/components/site/mode-toggle.utils";
 
 const props = withDefaults(
   defineProps<{
-    variant?: "icon" | "menu-row" | "menu-tile" | "pill";
+    variant?: "icon" | "menu-row";
     class?: HTMLAttributes["class"];
   }>(),
   {
@@ -25,108 +23,59 @@ const props = withDefaults(
 const colorMode = useColorMode();
 const { t } = useI18n();
 
-const colorModeOptions = [
-  { value: "light", labelKey: "theme.light", icon: "lucide:sun" },
-  { value: "dark", labelKey: "theme.dark", icon: "lucide:moon" },
-  { value: "system", labelKey: "theme.system", icon: "lucide:monitor" },
-] as const;
+const isDark = computed(() => colorMode.value === "dark");
+const toggleIcon = computed(() => themeToggleIcon(isDark.value));
+const toggleLabel = computed(() => t(themeToggleLabelKey(isDark.value)));
 
-type ColorModePreference = (typeof colorModeOptions)[number]["value"];
-
-const selectedColorModeOption = computed(
-  () =>
-    colorModeOptions.find((option) => option.value === colorMode.preference) ??
-    colorModeOptions.find((option) => option.value === "system")!,
-);
-const triggerIcon = computed(() => selectedColorModeOption.value.icon);
-const nextExplicitColorModeIcon = computed(() =>
-  colorMode.value === "dark" ? "lucide:sun" : "lucide:moon",
-);
-const triggerLabel = computed(() => t(selectedColorModeOption.value.labelKey));
-
-function isColorModePreference(value: string): value is ColorModePreference {
-  return colorModeOptions.some((option) => option.value === value);
-}
-
-function setColorModePreference(value: unknown) {
-  if (typeof value === "string" && isColorModePreference(value)) {
-    colorMode.preference = value;
-  }
+function toggleColorMode() {
+  const currentRendered = isDark.value ? "dark" : "light";
+  colorMode.preference = nextColorModePreference(currentRendered);
 }
 </script>
 
 <template>
-  <DropdownMenu>
-    <DropdownMenuTrigger as-child>
-      <Button
-        v-if="variant === 'menu-row' || variant === 'menu-tile'"
-        variant="ghost"
-        :class="
-          cn(
-            variant === 'menu-tile'
-              ? 'h-14 w-full justify-between rounded-none px-3.5 text-sm font-semibold hover:bg-muted/40'
-              : 'h-[4.25rem] w-full justify-between rounded-none px-5 text-base font-semibold hover:bg-transparent',
-            props.class,
-          )
-        "
-      >
-        <span
-          class="flex min-w-0 items-center"
-          :class="variant === 'menu-tile' ? 'gap-3' : 'gap-4'"
-        >
-          <span
-            class="flex shrink-0 items-center justify-center rounded-lg bg-muted/60 text-foreground"
-            :class="variant === 'menu-tile' ? 'size-8' : 'size-11'"
-          >
-            <Icon
-              :name="triggerIcon"
-              :class="variant === 'menu-tile' ? 'size-4' : 'size-5'"
-              aria-hidden="true"
-            />
-          </span>
-          <span class="truncate">{{
-            variant === "menu-tile" ? triggerLabel : t("theme.label")
-          }}</span>
-        </span>
-        <Icon
-          :name="variant === 'menu-tile' ? 'lucide:chevron-down' : 'lucide:chevron-right'"
-          :class="variant === 'menu-tile' ? 'size-4' : 'size-5'"
-          class="text-muted-foreground"
-          aria-hidden="true"
-        />
-      </Button>
-      <Button
-        v-else-if="variant === 'pill'"
-        variant="outline"
-        :class="cn('h-9 gap-2 rounded-full px-4 text-sm font-semibold', props.class)"
-      >
-        <Icon :name="triggerIcon" class="size-4" aria-hidden="true" />
-        <span>{{ triggerLabel }}</span>
-        <span class="sr-only">{{ t("theme.toggle") }}</span>
-      </Button>
-      <Button v-else variant="outline" size="icon" :class="cn('relative shrink-0', props.class)">
-        <Icon :name="nextExplicitColorModeIcon" class="size-[1.2rem]" aria-hidden="true" />
-        <span class="sr-only">{{ t("theme.toggle") }}</span>
-      </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent align="end" class="w-44" :portal-disabled="variant !== 'icon'">
-      <DropdownMenuRadioGroup
-        :model-value="colorMode.preference"
-        @update:model-value="setColorModePreference"
+  <button
+    v-if="variant === 'menu-row'"
+    type="button"
+    role="switch"
+    :aria-checked="isDark"
+    :aria-label="toggleLabel"
+    :class="
+      cn(
+        'flex h-14 w-full items-center justify-between rounded-none px-5 text-base font-semibold hover:bg-transparent',
+        props.class,
+      )
+    "
+    @click="toggleColorMode"
+  >
+    <span class="flex min-w-0 items-center gap-4">
+      <span
+        class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-foreground"
       >
-        <DropdownMenuRadioItem
-          v-for="option in colorModeOptions"
-          :key="option.value"
-          :value="option.value"
-          class="gap-3"
-        >
-          <template #indicator-icon>
-            <Icon name="lucide:check" class="size-4" aria-hidden="true" />
-          </template>
-          <Icon :name="option.icon" class="size-4" aria-hidden="true" />
-          <span>{{ t(option.labelKey) }}</span>
-        </DropdownMenuRadioItem>
-      </DropdownMenuRadioGroup>
-    </DropdownMenuContent>
-  </DropdownMenu>
+        <Icon :name="toggleIcon" class="size-5" aria-hidden="true" />
+      </span>
+      <span class="truncate">{{ t("theme.label") }}</span>
+    </span>
+    <span
+      class="relative inline-flex h-6 w-11 shrink-0 rounded-full border border-border bg-muted/60 transition-colors"
+      :class="isDark ? 'bg-foreground/80' : ''"
+      aria-hidden="true"
+    >
+      <span
+        class="absolute top-0.5 size-5 rounded-full bg-background shadow-xs transition-transform motion-reduce:transition-none"
+        :class="isDark ? 'translate-x-[1.375rem]' : 'translate-x-0.5'"
+      />
+    </span>
+  </button>
+  <button
+    v-else
+    type="button"
+    role="switch"
+    :aria-checked="isDark"
+    :aria-label="toggleLabel"
+    :class="cn(headerUtilityButtonClass, props.class)"
+    @click="toggleColorMode"
+  >
+    <Icon :name="toggleIcon" class="size-[18px]" aria-hidden="true" />
+  </button>
 </template>