chore: release v0.18.0

app/assets/logos/sponsors/index.ts

@@ -40,7 +40,7 @@ export const SPONSORS = {
         light: LogoCodeRabbitLight,
       },
       normalisingIndent: '0.875rem',
-      url: 'https://www.coderabbit.ai',
+      url: 'https://coderabbit.link/npmx',
     },
   ],
   silver: [

app/assets/main.css

@@ -15,13 +15,14 @@
 
   /* text colors */
   --fg: oklch(0.982 0 0);
-  --fg-muted: oklch(0.749 0 0);
-  --fg-subtle: oklch(0.673 0 0);
+  --fg-muted: oklch(0.849 0 0);
+  --fg-subtle: oklch(0.773 0 0);
 
   /* border, separator colors */
   --border: oklch(0.269 0 0);
   --border-subtle: oklch(0.239 0 0);
   --border-hover: oklch(0.371 0 0);
+  --border-elevated: oklch(0.369 0 0);
 
   /* accent color, set by user from settings */
   --accent: var(--accent-color, oklch(0.787 0.128 230.318));
@@ -81,19 +82,38 @@
   --bg-elevated: oklch(0.264 0 0);
 }
 
+:root[data-theme='dark'][data-fg-theme='contrast'] {
+  --fg: oklch(1 0 0);
+  --fg-muted: oklch(0.95 0 0);
+  --fg-subtle: oklch(0.9 0 0);
+}
+
+:root[data-theme='dark'][data-fg-theme='standard'] {
+  --fg: oklch(0.982 0 0);
+  --fg-muted: oklch(0.849 0 0);
+  --fg-subtle: oklch(0.773 0 0);
+}
+
+:root[data-theme='dark'][data-fg-theme='muted'] {
+  --fg: oklch(0.969 0 0);
+  --fg-muted: oklch(0.749 0 0);
+  --fg-subtle: oklch(0.673 0 0);
+}
+
 :root[data-theme='light'] {
   --bg: var(--bg-color, oklch(1 0 0));
   --bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375));
   --bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76));
   --bg-elevated: var(--bg-elevated-color, oklch(0.94 0.002 287.29));
 
-  --fg: oklch(0.146 0 0);
-  --fg-muted: oklch(0.398 0 0);
-  --fg-subtle: oklch(0.48 0 0);
+  --fg: oklch(0.046 0 0);
+  --fg-muted: oklch(0.198 0 0);
+  --fg-subtle: oklch(0.28 0 0);
 
   --border: oklch(0.8514 0 0);
   --border-subtle: oklch(0.922 0 0);
   --border-hover: oklch(0.715 0 0);
+  --border-elevated: oklch(0.75 0 0);
 
   --accent: var(--accent-color, oklch(0.5 0.16 247.27));
   --accent-muted: var(--accent-color, oklch(0.205 0 0));
@@ -147,29 +167,49 @@
   --bg-subtle: var(--bg-subtle-color, oklch(0.979 0 0));
 }
 
+:root[data-theme='light'][data-fg-theme='contrast'] {
+  --fg: oklch(0 0 0);
+  --fg-muted: oklch(0.1 0 0);
+  --fg-subtle: oklch(0.2 0 0);
+}
+
+:root[data-theme='light'][data-fg-theme='standard'] {
+  --fg: oklch(0.046 0 0);
+  --fg-muted: oklch(0.198 0 0);
+  --fg-subtle: oklch(0.28 0 0);
+}
+
+:root[data-theme='light'][data-fg-theme='muted'] {
+  --fg: oklch(0.146 0 0);
+  --fg-muted: oklch(0.398 0 0);
+  --fg-subtle: oklch(0.48 0 0);
+}
+
 @media (prefers-contrast: more) {
   :root[data-theme='dark'] {
     /* text colors */
     --fg: oklch(1 0 0);
-    --fg-muted: oklch(0.769 0 0);
-    --fg-subtle: oklch(0.693 0 0);
+    --fg-muted: oklch(0.869 0 0);
+    --fg-subtle: oklch(0.793 0 0);
 
     /* border, separator colors */
     --border: oklch(0.769 0 0);
     --border-subtle: oklch(0.739 0 0);
     --border-hover: oklch(0.771 0 0);
+    --border-elevated: oklch(0.869 0 0);
   }
 
   :root[data-theme='light'] {
     /* text colors */
     --fg: oklch(0 0 0);
-    --fg-muted: oklch(0.329 0 0);
-    --fg-subtle: oklch(0.4 0 0);
+    --fg-muted: oklch(0.229 0 0);
+    --fg-subtle: oklch(0.3 0 0);
 
     /* border, separator colors */
     --border: oklch(0.3514 0 0);
     --border-subtle: oklch(0.422 0 0);
     --border-hover: oklch(0.315 0 0);
+    --border-elevated: oklch(0.25 0 0);
   }
 }
 

app/components/Button/Base.vue

@@ -48,7 +48,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 cursor-pointer disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group gap-x-1 items-center justify-center font-mono border border-border-elevated/60 rounded-md transition-all duration-200 cursor-pointer disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'inline-flex': !block,
       'flex': block,
@@ -60,7 +60,7 @@ defineExpose({
       'text-xs p-0.5': size === 'sm' && !!iconOnly,
       'px-2': size === 'sm' && !classicon && !iconOnly,
       'ps-1.5 pe-2': size === 'sm' && !!classicon && !iconOnly,
-      'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
+      'bg-transparent text-fg hover:enabled:(bg-bg-elevated) focus-visible:enabled:(bg-bg-elevated) aria-pressed:(bg-bg-muted border-border-hover hover:enabled:(bg-bg-muted text-fg/50))':
         variant === 'secondary',
       'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant === 'primary',

app/components/Input/Base.vue

@@ -59,7 +59,7 @@ const inputAttrs = computed(() => ({
     v-bind="inputAttrs"
     @focus="emit('focus', $event)"
     @blur="emit('blur', $event)"
-    class="appearance-none bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
+    class="appearance-none bg-bg-subtle border border-border-elevated font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
     :class="{
       'text-xs leading-[1.2] px-2 py-2 rounded-md': size === 'sm',
       'text-sm leading-none px-3 py-2.5 rounded-lg': size === 'md',

app/components/Landing/IntroHeader.vue

@@ -126,7 +126,7 @@ onPrehydrate(el => {
     />
     <p
       id="intro-header-tagline"
-      class="text-fg-muted text-lg ms-auto me-auto sm:text-xl max-w-xl mb-12 lg:mb-14 motion-safe:animate-slide-up motion-safe:animate-fill-both delay-100"
+      class="text-fg-muted text-lg sm:text-xl mb-12 lg:mb-14 motion-safe:animate-slide-up motion-safe:animate-fill-both delay-100"
     >
       {{ $t('tagline') }}
     </p>

app/components/Noodle/GifDay/GifText.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const props = defineProps<{
+  text: string
+  backgroundUrl: string
+  title?: string
+  backgroundPosition?: string
+  backgroundSize?: string
+}>()
+
+const loaded = ref(false)
+const random = useState(`gif-text-rotate-${useId()}`, () => Math.random())
+const rotateFrom = computed(() => (random.value < 0.5 ? '-rotate-20' : 'rotate-20'))
+
+onMounted(() => {
+  const image = new Image()
+  image.addEventListener('load', () => {
+    loaded.value = true
+  })
+  image.src = props.backgroundUrl
+})
+
+const style = computed(() => ({
+  backgroundImage: loaded.value ? `url(${props.backgroundUrl})` : undefined,
+  backgroundPosition: props.backgroundPosition,
+  backgroundSize: props.backgroundSize,
+}))
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-block motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-[cubic-bezier(0.34,1.56,0.64,1)] motion-reduce:transition-none',
+      loaded
+        ? 'opacity-100 scale-100 translate-y-0 rotate-0'
+        : `opacity-0 scale-85 translate-y-[20%] ${rotateFrom}`,
+    ]"
+  >
+    <span
+      :title
+      :style
+      :class="[
+        'font-noodle select-none leading-none bg-cover bg-center motion-safe:text-transparent bg-clip-text text-[4rem] @xl:text-[14rem] font-extrabold transition-all duration-300',
+      ]"
+    >
+      {{ text }}
+    </span>
+  </span>
+</template>

app/components/Noodle/GifDay/Logo.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+type GifText = {
+  text: string
+  url: string
+  title: string
+  backgroundPosition?: string
+  backgroundSize?: string
+}
+const textArray: GifText[] = [
+  {
+    text: './',
+    url: 'https://media1.tenor.com/m/_ETKRybU9WEAAAAd/orange-cat-stare.gif',
+    backgroundSize: '130%',
+    backgroundPosition: '50% 64%',
+    title: 'Obviously a cat',
+  },
+  {
+    text: 'n',
+    url: 'https://media1.tenor.com/m/VFDevE2qwdcAAAAC/good-morning.gif',
+    backgroundSize: '170%',
+    title: 'Nicolas Cage',
+  },
+  {
+    text: 'p',
+    url: 'https://media1.tenor.com/m/8QP4JDPp85UAAAAC/kido.gif',
+    backgroundSize: '180%',
+    backgroundPosition: '70% 60%',
+    title: 'Party',
+  },
+  {
+    text: 'm',
+    url: 'https://media1.tenor.com/m/aN_HGmP-ZgAAAAAC/m.gif',
+    backgroundPosition: '39% 120%',
+    backgroundSize: '180%',
+    title: 'Minions',
+  },
+  {
+    text: 'x',
+    url: 'https://media1.tenor.com/m/tslbzvMV878AAAAC/xmen-97-cyclops.gif',
+    backgroundSize: '180%',
+    title: 'X-Men',
+  },
+]
+</script>
+
+<template>
+  <div class="flex @container justify-center w-full md:w-[720px]" aria-hidden="true">
+    <NoodleGifDayGifText
+      v-for="item in textArray"
+      :key="item.text"
+      :text="item.text"
+      :title="item.title"
+      :background-url="item.url"
+      :background-position="item.backgroundPosition"
+      :background-size="item.backgroundSize"
+    />
+  </div>
+</template>

app/components/Noodle/index.ts

@@ -9,6 +9,7 @@ import NoodlePride2Logo from './Pride2/Logo.vue'
 import NoodlePride3Logo from './Pride3/Logo.vue'
 import NoodleTetrisLogo from './Tetris/Logo.vue'
 import NoodleEmojiDayLogo from './EmojiDay/Logo.vue'
+import NoodleGifDayLogo from './GifDay/Logo.vue'
 
 export type Noodle = {
   // Unique identifier for the noodle
@@ -72,6 +73,13 @@ export const ACTIVE_NOODLES: Noodle[] = [
     dateTo: '2026-07-19',
     timezone: 'auto',
   },
+  {
+    key: 'gif-day',
+    logo: NoodleGifDayLogo,
+    date: '2026-09-05',
+    dateTo: '2026-09-05',
+    timezone: 'auto',
+  },
 ]
 
 // Logo registry for the /noodles archive, keyed by the entry's `key` in
@@ -86,6 +94,7 @@ const NOODLE_LOGOS: Record<string, Component> = {
   'pride-1': NoodlePride1Logo,
   'tetris': NoodleTetrisLogo,
   'emoji-day': NoodleEmojiDayLogo,
+  'gif-day': NoodleGifDayLogo,
 }
 
 export function resolveNoodleLogo(key: string): Component | undefined {

app/components/Package/Dependencies.vue

@@ -142,7 +142,7 @@ const numberFormatter = useNumberFormatter()
                 class="inline-flex items-center justify-center p-2 -m-2"
                 :aria-label="getOutdatedTooltip(outdatedDeps[dep], $t)"
               >
-                <span class="i-lucide:circle-alert w-3 h-3" aria-hidden="true" />
+                <span class="i-lucide:arrow-up w-3 h-3" aria-hidden="true" />
               </button>
             </TooltipApp>
             <TooltipApp

app/components/Package/ExternalLinks.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 
 const displayVersion = computed(() => props.pkg?.requestedVersion ?? null)
 const { repositoryUrl } = useRepositoryUrl(displayVersion)
-const { meta: repoMeta, repoRef, stars, starsLink, forks, forksLink } = useRepoMeta(repositoryUrl)
+const { meta: repoMeta, repoRef, stars, forks, forksLink, repoLink } = useRepoMeta(repositoryUrl)
 const compactNumberFormatter = useCompactNumberFormatter()
 
 const homepageUrl = computed(() => {
@@ -55,14 +55,14 @@ useCommandPaletteContextCommands(
       })
     }
 
-    if (repositoryUrl.value && starsLink.value) {
+    if (repositoryUrl.value && repoLink.value) {
       commands.push({
         id: 'package-link-stars',
         group: 'links',
         label: $t('command_palette.package_links.stars'),
         keywords: [...packageKeywords, $t('command_palette.package_links.stars')],
         iconClass: 'i-lucide:star',
-        href: starsLink.value,
+        href: repoLink.value,
       })
     }
 
@@ -143,8 +143,8 @@ useCommandPaletteContextCommands(
         <span v-else>{{ $t('package.links.repo') }}</span>
       </LinkBase>
     </li>
-    <li v-if="repositoryUrl && repoMeta && starsLink">
-      <LinkBase :to="starsLink" classicon="i-lucide:star">
+    <li v-if="repositoryUrl && repoMeta && repoLink">
+      <LinkBase :to="repoLink" classicon="i-lucide:star">
         {{ compactNumberFormatter.format(stars) }}
       </LinkBase>
     </li>