chore: release v0.15.0

app/components/AppHeader.vue

@@ -258,7 +258,7 @@ useShortcuts({
       <ButtonBase
         type="button"
         variant="secondary"
-        class="hidden lg:inline-flex shrink-0 gap-2 px-2.5 me-3"
+        class="hidden lg:inline-flex shrink-0 gap-2 ps-2.5 pe-1.25 py-1.25! me-3"
         :aria-label="$t('shortcuts.command_palette')"
         :title="$t('shortcuts.command_palette_description', { ctrlKey: $t('shortcuts.ctrl_key') })"
         @click="openCommandPalette"

app/components/Noodle/Pride1/Logo.vue

@@ -5,7 +5,7 @@
     </template>
     <img
       width="400"
-      class="mb-6 w-80 sm:w-140 max-w-full"
+      class="mb-6 w-80 sm:w-140 max-w-full mx-auto"
       src="/extra/pride-1.svg"
       :alt="$t('alt_logo')"
     />

app/components/Package/SizeDecrease.vue

@@ -7,8 +7,9 @@ const props = defineProps<{
 
 const bytesFormatter = useBytesFormatter()
 const numberFormatter = useNumberFormatter()
+const percentFormatter = useNumberFormatter({ style: 'percent' })
 
-const sizePercent = computed(() => Math.round(Math.abs(props.diff.sizeRatio) * 100))
+const sizePercent = computed(() => percentFormatter.value.format(Math.abs(props.diff.sizeRatio)))
 const sizeDecreaseAbs = computed(() => Math.abs(props.diff.sizeIncrease))
 const depDecreaseAbs = computed(() => Math.abs(props.diff.depDiff))
 </script>
@@ -33,7 +34,7 @@ const depDecreaseAbs = computed(() => Math.abs(props.diff.depDiff))
     <p class="text-sm m-0 mt-1">
       <i18n-t v-if="diff.sizeThresholdExceeded" keypath="package.size_decrease.size" scope="global">
         <template #percent
-          ><strong>{{ sizePercent }}%</strong></template
+          ><strong>{{ sizePercent }}</strong></template
         >
         <template #size
           ><strong>{{ bytesFormatter.format(sizeDecreaseAbs) }}</strong></template

app/components/Package/SizeIncrease.vue

@@ -7,8 +7,9 @@ const props = defineProps<{
 
 const bytesFormatter = useBytesFormatter()
 const numberFormatter = useNumberFormatter()
+const percentFormatter = useNumberFormatter({ style: 'percent' })
 
-const sizePercent = computed(() => Math.round(props.diff.sizeRatio * 100))
+const sizePercent = computed(() => percentFormatter.value.format(Math.abs(props.diff.sizeRatio)))
 </script>
 
 <template>
@@ -28,7 +29,7 @@ const sizePercent = computed(() => Math.round(props.diff.sizeRatio * 100))
     <p class="text-sm m-0 mt-1">
       <i18n-t v-if="diff.sizeThresholdExceeded" keypath="package.size_increase.size" scope="global">
         <template #percent
-          ><strong>{{ sizePercent }}%</strong></template
+          ><strong>{{ sizePercent }}</strong></template
         >
         <template #size
           ><strong>{{ bytesFormatter.format(diff.sizeIncrease) }}</strong></template

app/composables/useColors.ts

@@ -1,5 +1,18 @@
-import { computed, shallowRef, type ComputedRef, type Ref, type ShallowRef, unref } from 'vue'
-import { useMutationObserver, useResizeObserver, useSupported } from '@vueuse/core'
+import {
+  computed,
+  shallowRef,
+  type ComputedRef,
+  type Ref,
+  type ShallowRef,
+  unref,
+  watch,
+} from 'vue'
+import {
+  useMutationObserver,
+  useResizeObserver,
+  useSupported,
+  usePreferredDark,
+} from '@vueuse/core'
 
 type CssVariableSource = HTMLElement | null | undefined | Ref<HTMLElement | null | undefined>
 
@@ -36,6 +49,8 @@ export function useColors(
   options: { watchHtmlAttributes?: boolean; watchResize?: boolean } = {},
 ): { colors: ComputedRef<Record<string, string>> } {
   const recomputeToken = shallowRef(0)
+  const isPreferredDark = usePreferredDark()
+
   const invalidateColors = () => {
     recomputeToken.value += 1
   }
@@ -44,6 +59,8 @@ export function useColors(
     () => typeof window !== 'undefined' && typeof document !== 'undefined',
   )
 
+  watch(isPreferredDark, invalidateColors)
+
   const colors = computed<Record<string, string>>(() => {
     void recomputeToken.value
     const resolvedElement = resolveElement(element)

app/pages/package-timeline/[[org]]/[packageName].vue

@@ -347,7 +347,7 @@ useSeoMeta({
       page="timeline"
     />
 
-    <div class="sticky top-24 z-1 bg-bg mt-8">
+    <div class="[@media(min-height:1024px)]:sticky top-24 z-1 bg-bg mt-8">
       <div class="container w-full">
         <div class="mx-auto">
           <PackageTimelineChart