kmcom-nuxt-layers 1.6.11 → 1.6.15

package/layers/motion/app/assets/css/motion.css

@@ -1,7 +1,4 @@
 /* Motion Layer CSS */
-.motion-layer {
-  /* Base styles for motion layer */
-}
 
 /* Transition classes */
 .transition-default {

package/layers/theme/app/assets/css/theme.css

@@ -6,6 +6,15 @@
  * same Tailwind pass as all utility generation (avoids HMR regeneration shift).
  */
 
+/* --- Theme Transition --- */
+@layer utilities {
+  .theme-transition {
+    transition-property: color, background-color, border-color, fill, stroke, box-shadow;
+    transition-duration: 700ms;
+    transition-delay: 0ms;
+  }
+}
+
 /* --- Reduced Motion --- */
 [data-theme-motion='reduced'] *,
 [data-theme-motion='reduced'] *::before,

package/layers/ui/app/assets/css/ui.css

@@ -18,3 +18,9 @@
 [data-theme-transparency='reduced'] .accent-blob {
   opacity: 0 !important;
 }
+
+@layer utilities {
+  .site-word {
+    display: block;
+  }
+}

package/layers/ui/app/components/Site/Subtitle.vue

@@ -0,0 +1,5 @@
+<template>
+  <span v-for="(word, index) in useSite().subtitleWords" :key="index" class="site-word">
+    {{ word }}
+  </span>
+</template>

package/layers/ui/app/components/Site/Title.vue

@@ -1,15 +1,5 @@
-<script lang="ts" setup>
-import { splitSpaces } from '../../utils/regex'
-
-defineProps<{
-  siteTitle: string
-  tag: string
-  titleVariant: string
-}>()
-</script>
-
 <template>
-  <component :is="tag" :v-bind="$attrs">
-    {{ titleVariant == 'split' ? splitSpaces(siteTitle) : siteTitle }}
-  </component>
+  <span v-for="(word, index) in useSite().titleWords" :key="index" class="site-word">
+    {{ word }}
+  </span>
 </template>

package/layers/ui/app/components/Typography/HeadlineScreen.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { useColor } from '../../composables/color'
+import { useTypography } from '../../composables/typography'
+import type { UiColors } from '../../types/colors'
+import type {
+  FontLeading,
+  FontScreenSize,
+  FontSlant,
+  FontTracking,
+  FontWeight,
+  FontWidth,
+  TextAlign,
+  TextTransform,
+} from '../../types/typography'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    level?: 1 | 2 | 3 | 4 | 5 | 6
+    size?: FontScreenSize
+    weight?: FontWeight
+    width?: FontWidth
+    slant?: FontSlant
+    leading?: FontLeading
+    tracking?: FontTracking
+    align?: TextAlign
+    transform?: TextTransform
+    color?: UiColors
+    class?: string
+  }>(),
+  {
+    level: 1,
+    size: 'screen-xxl',
+    weight: 'font-bold',
+    width: 'font-stretch-normal',
+    slant: 'normal',
+    leading: 'leading-tight',
+    tracking: 'tracking-tight',
+    align: 'left',
+    transform: 'none',
+    class: '',
+  }
+)
+
+const tag = computed(() => `h${props.level}` as const)
+const sizeClass = computed(() => `text-${props.size}`)
+
+const { classes } = useTypography({
+  weight: props.weight,
+  width: props.width,
+  slant: props.slant,
+  leading: props.leading,
+  tracking: props.tracking,
+  align: props.align,
+  transform: props.transform,
+})
+
+const colorClass = useColor(props.color, 'text')
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :class="[sizeClass, classes, colorClass, props.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </component>
+</template>

package/layers/ui/app/composables/useSite.ts

@@ -0,0 +1,13 @@
+import { splitSpaces } from '../utils/regex'
+
+export function useSite() {
+  const config = useAppConfig().site
+
+  return {
+    title: config.title as string,
+    titleWords: splitSpaces(config.title as string) as string[],
+    subtitle: config.subtitle as string,
+    subtitleWords: splitSpaces(config.subtitle as string) as string[],
+    description: config.description as string,
+  }
+}

package/layers/ui/app/types/typography.ts

@@ -112,6 +112,13 @@ export type FontTracking =
   | 'tracking-widest'
   | FontTrackingNumber
 
+/* ======================================================
+   Screen-scale Font Sizes
+   - Companion to text-screen-* fluid tokens
+   ====================================================== */
+
+export type FontScreenSize = 'screen' | 'screen-xl' | 'screen-xxl' | 'screen-xxxl'
+
 /* ======================================================
    Text Layout
    ====================================================== */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.6.11",
+  "version": "1.6.15",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "files": [
     "layers/*/nuxt.config.ts",