@codecavepro/brand 2.3.0 → 2.4.2

package/README.md

@@ -97,7 +97,7 @@ Get the cuts from [Fontshare](https://www.fontshare.com/fonts/satoshi) — 300,
 700 and 900, each upright and italic, which is the ten faces these stylesheets declare.
 Bind each with a real `font-weight` descriptor rather than letting the browser
 synthesize; the design system documents why in
-[DESIGN.md §10.3](https://github.com/CodeCavePro/brand/blob/development/docs/DESIGN.md#103-synthesized-vs-real-font-weights).
+[DESIGN.md §10.3](https://github.com/CodeCavePro/brand/blob/development/DESIGN.md#103-synthesized-vs-real-font-weights).
 
 **Do not use the `stylesheet.css` that comes in the Fontshare download.** It declares
 Bold and Black _both_ as `font-weight: bold`, and their italics likewise, so four cuts
@@ -155,7 +155,7 @@ Two things to know about it:
 
 ## The components
 
-20 components and 13 icons — the buttons, the form controls and the forms
+21 components and 13 icons — the buttons, the form controls and the forms
 themselves, the nav bar, the footer link group, the article and technology
 cards, the review card and the typing effect codecave.pro renders — ship as
 **source**, byte-for-byte the files the site builds from. Not a reimplementation
@@ -308,7 +308,7 @@ the rules, the reasoning, the anti-patterns — is documented separately:
 
 - **[brand.codecave.pro](https://brand.codecave.pro/)** — the published design system:
   brand kit, foundation specimens, and a storybook of real components.
-- **[DESIGN.md](https://github.com/CodeCavePro/brand/blob/development/docs/DESIGN.md)** —
+- **[DESIGN.md](https://github.com/CodeCavePro/brand/blob/development/DESIGN.md)** —
   the rules in full: the 26-step ramp, components, motion, anti-patterns, known
   divergences from what the site ships today.
 - **[CodeCavePro/brand](https://github.com/CodeCavePro/brand)** — the repository.

package/dist/src/common/ArticlePreview.vue

@@ -32,12 +32,12 @@ const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
 
 <template>
   <a :href="`${basePath ?? ''}${article.slug}/`" :class="`mx-1 lg:mx-2 w-full h-full self-start sm:self-auto p-6 flex flex-col gap-5 sm:gap-8
-      rounded-[2.25rem] bg-surface-secondary hover:bg-surface-secondary transition-colors cursor-pointer border-surface-tertiary border
+      rounded-[2.25rem] bg-surface-secondary hover:bg-surface-tertiary transition-colors cursor-pointer border-surface-tertiary border
       ${className ?? ''}`">
     <div class="flex flex-col sm:flex-row gap-5 sm:gap-8 h-fit">
       <img loading="lazy" class="sm:w-[132px] sm:h-[132px] rounded-xl object-cover" 
         :src="imageUrl(article.cover.url)" 
-        :alt="article.cover.name" 
+        :alt="article.title" 
         :width="100" 
         :height="100"/>
       <div class="space-y-2 sm:space-y-3">

package/dist/src/common/BrandNav.vue

@@ -229,7 +229,7 @@ withDefaults(defineProps<{
   visibility: hidden;
   border-radius: 1rem;
   padding: 1.25rem;
-  background: var(--color-surface-primary-transparent);
+  background: var(--color-surface-primary);
   -webkit-backdrop-filter: blur(24px);
   backdrop-filter: blur(24px);
   transition: opacity 0.2s ease, visibility 0.2s;

package/dist/src/common/Button.vue

@@ -29,7 +29,7 @@ const variantClass = computed(() => {
     case 'link':
       return `${linkBaseClass} text-hovered underline`
     default:
-      return `${buttonBaseClass} bg-primary-500 hover:bg-primary-700 active:bg-primary-900`
+      return `${buttonBaseClass} px-6 py-1 bg-primary-500 hover:bg-primary-700 active:bg-primary-900`
   }
 })
 </script>

package/dist/src/common/Radio.vue

@@ -5,21 +5,25 @@ const props = defineProps<{
   id: string
   label: string
   name: string
-  isChecked?: boolean
   modelValue?: string
   variant?: 'primary' | 'secondary'
 }>()
+
+const emit = defineEmits<{'update:modelValue': [value: string]}>()
+
 const baseLabelClass = 'w-fit flex items-center cursor-pointer text-body-primary transition-colors'
+
 const labelClass = computed(() => {
   switch (props.variant) {
     case 'secondary':
-      return `${baseLabelClass} gap-3 p-3 pr-4 bg-surface-primary-transparent rounded-custom border-2 border-surface-quaternary group-hover:bg-surface-tertiary`
+      return `${baseLabelClass} gap-3 p-3 pr-4 bg-surface-primary-transparent rounded-custom border-2 border-surface-quaternary hover:bg-surface-tertiary`
     default:
       return `${baseLabelClass} gap-2 py-2 px-3 bg-surface-secondary rounded-lg`
   }
 })
 
-defineEmits(['update:modelValue'])
+const value = computed(() => props.id)
+const isChecked = computed(() => props.modelValue === value.value)
 </script>
 
 <template>
@@ -28,13 +32,13 @@ defineEmits(['update:modelValue'])
       :class="[labelClass]"
   >
     <input
-        type="radio"
-        :id="id"
-        :name="name"
-        :value="id"
-        class="bg-transparent border-[2px] border-surface-quaternary checked:border-action rounded-full hover:border-action"
-        :checked="isChecked"
-        @change="$emit('update:modelValue', id)"
+      :id="id"
+      type="radio"
+      :name="name"
+      :value="value"
+      class="bg-transparent border-[2px] border-surface-quaternary checked:border-action rounded-full hover:border-action"
+      :checked="isChecked"
+      @change="emit('update:modelValue', value)"
     />
     <span class="text-xs whitespace-nowrap">
       {{ label }}

package/dist/src/footer/FooterCta.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import Button from "../common/Button.vue";
+</script>
+
+<template>
+  <section
+  class="p-8 md:p-10 flex flex-col md:flex-row items-center justify-between gap-12 md:gap-7 rounded-3xl bg-primary-800"
+>
+  <div class="flex-1">
+    <h3 class="text-heading font-bold text-[32px]">
+      Grab our AI trends research!
+    </h3>
+
+    <p class="md:mt-1 mt-4 text-body-secondary-lighter text-pretty">
+      We’ve researched current state of the AI in 3 industries so you don’t have to.
+      <br>
+      Check what we’ve found about yours.
+    </p>
+  </div>
+
+  <Button
+    title="Grab Research"
+    class="px-6"
+  />
+</section>
+</template>

package/dist/src/homepage/technology-card.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import Button from "../common/Button.vue";
+import { computed } from 'vue'
 
-defineProps<{
+const props = defineProps<{
   active: boolean
   name: string
-  /* Where "Explore service" goes. The card used to switch on `name` over this
-   * site's six service routes; that map is now @helpers/service-links.ts and
-   * the caller passes the result, so the card reaches no route table. An empty
-   * string renders the button inert, exactly as the switch's default did. */
   href?: string
   className?: string
   index?: number
@@ -30,11 +27,24 @@ const translate = [
   'xl:-translate-y-1/2',
   'xl:-translate-y-1/2',
 ]
+
+const cardClass = computed(() => [
+  'rounded-3xl',
+  'card-wrapper',
+  'cursor-pointer',
+  'select-none',
+  'absolute',
+  'transform',
+  'transition-transform',
+  'duration-500',
+  props.index !== undefined ? rotate[props.index] : '',
+  props.index !== undefined && props.active ? translate[props.index] : '',
+  props.className,
+])
 </script>
 
 <template>
-  <div :class="`rounded-3xl card-wrapper cursor-pointer select-none absolute transform transition-transform duration-500
-  ${rotate[index]} ${active ? `${translate[index]}` : ''} ${className || ''}`">
+  <div :class="cardClass">
     <div class="card flex flex-col items-center justify-around">
       <h3 class="max-w-[8rem] text-center text-xl font-bold text-heading text-balance">
         {{ name }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "2.3.0",
+  "version": "2.4.2",
   "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
   "license": "Unlicense",
   "type": "module",