@codecavepro/brand 2.2.0 → 2.4.2

package/README.md

@@ -6,10 +6,10 @@ wrapper layer.
 
 Link one stylesheet and the whole system is live on `:root`.
 
-> **Status: stable.** The token *values* mirror what
-> [codecave.pro](https://codecave.pro) ships, and the package *layout* — export paths,
+> **Status: stable.** The token _values_ mirror what
+> [codecave.pro](https://codecave.pro) ships, and the package _layout_ — export paths,
 > module shape — is settled under semver: an export will not move or disappear outside a
-> major bump. Token *values* can change in a minor or patch release, because they track a
+> major bump. Token _values_ can change in a minor or patch release, because they track a
 > living design system; pin an exact version if you need them frozen.
 
 ## Install
@@ -48,7 +48,7 @@ redesign turns into a find-and-replace across your codebase.
 `@codecavepro/brand/css` is the design system **whole**: the tokens, ten `@font-face`
 rules, base rules for `html`, `body`, `h1`–`h6` and `a`, two layout primitives and
 around sixty component classes. That is what you want for a page that should look like
-CODECAVE. It is *not* what you want in an app that already has a base layer — dropping
+CODECAVE. It is _not_ what you want in an app that already has a base layer — dropping
 it in restyles every heading and link you have.
 
 For that case there is a second stylesheet holding the custom properties and nothing
@@ -60,7 +60,7 @@ else:
 
 Same 103 properties on `:root`, same values, zero rules. Nothing it declares can change
 how a single existing element renders — a `var()` only takes effect where you write
-one. Fonts come with it only as a *name*: `--font-sans` says Satoshi, and declaring the
+one. Fonts come with it only as a _name_: `--font-sans` says Satoshi, and declaring the
 faces stays your call (see below).
 
 Use it to end a duplicated palette without signing up for a redesign in the same commit.
@@ -70,7 +70,7 @@ Use it to end a duplicated palette without signing up for a redesign in the same
 The same file is served, byte for byte, from the published design system:
 
 ```html
-<link rel="stylesheet" href="https://brand.codecave.pro/colors_and_type.css">
+<link rel="stylesheet" href="https://brand.codecave.pro/colors_and_type.css" />
 ```
 
 The package build asserts that identity, so the file in your `node_modules` and the
@@ -81,26 +81,26 @@ file at that URL are provably the same bytes.
 `@codecavepro/brand/css` declares ten `@font-face` rules for **Satoshi**, but **no font
 binaries are included** — that is a licensing question, not an oversight. Until you
 supply the files, the faces 404 and the browser falls back down the stack
-(`-apple-system`, `Segoe UI`, Roboto, …). Tokens, colours and the type *scale* are all
+(`-apple-system`, `Segoe UI`, Roboto, …). Tokens, colours and the type _scale_ are all
 correct regardless; only the typeface is missing.
 
 The two stylesheets expect the files in **different places**, because one is meant to be
 dropped into a project on its own:
 
-| Import | `@font-face` URLs | Put the `.woff2`/`.woff` files at |
-|---|---|---|
-| `@codecavepro/brand/css` | `./fonts/Satoshi-*.woff2` | a `fonts/` directory **beside** the stylesheet |
-| `@codecavepro/brand/fonts.css` | `./Satoshi-*.woff2` | **beside** the stylesheet itself |
-| `@codecavepro/brand/tokens.css` | *none — it declares no faces* | wherever your own `@font-face` rules point |
+| Import                          | `@font-face` URLs             | Put the `.woff2`/`.woff` files at              |
+| ------------------------------- | ----------------------------- | ---------------------------------------------- |
+| `@codecavepro/brand/css`        | `./fonts/Satoshi-*.woff2`     | a `fonts/` directory **beside** the stylesheet |
+| `@codecavepro/brand/fonts.css`  | `./Satoshi-*.woff2`           | **beside** the stylesheet itself               |
+| `@codecavepro/brand/tokens.css` | _none — it declares no faces_ | wherever your own `@font-face` rules point     |
 
 Get the cuts from [Fontshare](https://www.fontshare.com/fonts/satoshi) — 300, 400, 500,
 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
+Bold and Black _both_ as `font-weight: bold`, and their italics likewise, so four cuts
 collide into two slots and whichever is declared last silently wins — your `900` text
 renders Bold, or your `700` renders Black, with nothing to indicate which. Take the
 binaries from that download and the declarations from here.
@@ -111,13 +111,19 @@ For consumers that cannot read a stylesheet — design tooling, canvas/WebGL ren
 PDF and email builders, native apps:
 
 ```ts
-import { color, radius, fontSize, spacing, gradientBrand } from '@codecavepro/brand';
-
-color.action;          // '#5F20FE'
+import {
+  color,
+  radius,
+  fontSize,
+  spacing,
+  gradientBrand,
+} from "@codecavepro/brand";
+
+color.action; // '#5F20FE'
 color.surfaceSecondary; // '#0F0F15'
-radius.card;           // '1.5rem'
-fontSize.headingLg;    // { size: '3.5rem', lineHeight: '130%' }
-fontSize.body;         // { size: '1rem', lineHeight: '1.5rem' }
+radius.card; // '1.5rem'
+fontSize.headingLg; // { size: '3.5rem', lineHeight: '130%' }
+fontSize.body; // { size: '1rem', lineHeight: '1.5rem' }
 spacing.sectionPaddingTop; // '12.5rem'
 ```
 
@@ -131,14 +137,14 @@ Everything is `as const`, so the values are literal types, and the key unions ar
 exported for building your own maps:
 
 ```ts
-import type { SemanticColor, Radius, FontSizeStep } from '@codecavepro/brand';
+import type { SemanticColor, Radius, FontSizeStep } from "@codecavepro/brand";
 ```
 
-| Module | Exports |
-|---|---|
-| colour | `brand`, `gray`, `accent`, `technologyGradient`, `error`, `color`, `gradientBrand` |
-| layout | `radius`, `gutter`, `spacing`, `shadow`, `maxWidthDesktop`, `breakpointSm` |
-| typography | `fontFamily`, `fontSize`, `fontWeight`, `eyebrow` |
+| Module     | Exports                                                                            |
+| ---------- | ---------------------------------------------------------------------------------- |
+| colour     | `brand`, `gray`, `accent`, `technologyGradient`, `error`, `color`, `gradientBrand` |
+| layout     | `radius`, `gutter`, `spacing`, `shadow`, `maxWidthDesktop`, `breakpointSm`         |
+| typography | `fontFamily`, `fontSize`, `fontWeight`, `eyebrow`                                  |
 
 Two things to know about it:
 
@@ -149,7 +155,7 @@ Two things to know about it:
 
 ## The components
 
-19 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
@@ -168,8 +174,11 @@ the rest could follow.
 
 ```vue
 <BrandNav
-  :left="[{ name: &apos;Workflow&apos;, href: &apos;/workflow&apos; }, { name: &apos;Services&apos;, slot: &apos;services&apos; }]"
-  :right="[{ name: &apos;Insights&apos;, href: &apos;/insights&apos; }]"
+  :left="[
+    { name: 'Workflow', href: '/workflow' },
+    { name: 'Services', slot: 'services' },
+  ]"
+  :right="[{ name: 'Insights', href: '/insights' }]"
   :logo="wordmarkUrl"
   current="Workflow"
 >
@@ -184,9 +193,9 @@ resolve through your own asset pipeline.
 
 ```vue
 <script setup lang="ts">
-import Button from '@codecavepro/brand/components/common/Button.vue';
-import TextField from '@codecavepro/brand/components/common/TextField.vue';
-import CloudIcon from '@codecavepro/brand/assets/icons/cloud-icon.vue';
+import Button from "@codecavepro/brand/components/common/Button.vue";
+import TextField from "@codecavepro/brand/components/common/TextField.vue";
+import CloudIcon from "@codecavepro/brand/assets/icons/cloud-icon.vue";
 </script>
 
 <template>
@@ -212,7 +221,7 @@ components; leave one out and only those are affected — `gsap` by `GlowButton.
 Every colour, radius and control height in these components is a token — but they reach
 most of them through **Tailwind utility classes** (`bg-surface-primary`,
 `text-heading-md`, `rounded-custom`), and a utility class exists only if Tailwind knows
-the name. `tokens.css` gives you the *values*; `theme.css` gives Tailwind the names, so
+the name. `tokens.css` gives you the _values_; `theme.css` gives Tailwind the names, so
 you need both:
 
 ```css
@@ -271,7 +280,10 @@ three that show images take an optional resolver and default to leaving the URL
 <Review :item="testimonial" />
 
 <!-- URLs relative to your own media host -->
-<Review :item="testimonial" :resolve-image="(u) => `https://cdn.example.com/${u}`" />
+<Review
+  :item="testimonial"
+  :resolve-image="(u) => `https://cdn.example.com/${u}`"
+/>
 ```
 
 Their props are declared as the fields each one reads — `item.photo.url`,
@@ -296,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.
@@ -306,7 +318,7 @@ the rules, the reasoning, the anti-patterns — is documented separately:
 It authors nothing. Every byte is copied, extracted or compiled out of `docs/` in the
 repository above: `css` and `fonts.css` are copied verbatim, `tokens.css` is extracted
 from the same file `css` is copied from, `theme.css` is extracted from the capture of
-codecave.pro's `global.css`, and the typed module is compiled from `docs/tokens/*.ts`.
+codecave.pro's `global.css`, and the typed module is compiled from `src/tokens/*.ts`.
 A name that `theme.css` and `tokens.css` both give a literal value must agree, and the
 build fails if it does not — otherwise one of the two would be dead and nobody would
 see it. `docs/` stays the single origin, and CI asserts on every push that

package/dist/src/{components/common → common}/ArticlePreview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formattedDate } from "../../helpers/date-formatter.ts";
+import { formattedDate } from "../helpers/date-formatter.ts";
 
 /* The fields this component actually reads, instead of the generated Strapi
  * `Article`. TypeScript is structural, so a real Article still satisfies this
@@ -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/{components/common → 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/{components/common → 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/{components/common → common}/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import AsteriskIcon from "../../assets/icons/asterisk-icon.vue";
+import AsteriskIcon from "../assets/icons/asterisk-icon.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -101,7 +101,7 @@ input::before {
   content: '';
   transform: scale(0);
   transition: var(--duration-control) transform ease-in-out;
-  background-image: url("../../assets/images/checked-icon.svg");
+  background-image: url("../assets/images/checked-icon.svg");
   background-repeat: no-repeat;
   background-position: center center;
 }

package/dist/src/common/HeaderBrows.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="flex flex-col md:flex-row gap-4 md:gap-6 text-lg md:text-xl">
+          <div class="space-x-1">
+            <span class="font-bold text-body-primary">15+</span>
+            <span class="text-body-secondary">Years of experience</span>
+          </div>
+          <div class="space-x-1">
+            <span class="font-bold text-body-primary">4.7</span>
+            <span class="text-body-secondary">Average rating</span>
+          </div>
+        </div>
+</template>

package/dist/src/{components/common → common}/InputText.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import AsteriskIcon from "../../assets/icons/asterisk-icon.vue";
+import AsteriskIcon from "../assets/icons/asterisk-icon.vue";
 
 defineProps<{
   id: string

package/dist/src/{components/common → 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/{components/common → common}/Review.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import LinkedinIcon from "../../assets/icons/linkedin-icon.vue";
-import VerifiedIcon from "../../assets/icons/verified-icon.vue";
+import LinkedinIcon from "../assets/icons/linkedin-icon.vue";
+import VerifiedIcon from "../assets/icons/verified-icon.vue";
 import LazyImage from "./images/LazyImage.vue"
 
 /* See ArticlePreview.vue: the fields read here, not the generated Strapi

package/dist/src/{components/common → common}/forms/ContactUsForm.vue

@@ -5,16 +5,16 @@ import Checkbox from "../Checkbox.vue";
 import Radio from "../Radio.vue";
 import TextField from "../TextField.vue";
 import { computed, ref, watch } from "vue";
-import SuccessIcon from "../../../assets/icons/success-icon.vue";
-import CloseIcon from "../../../assets/icons/close-icon.vue";
+import SuccessIcon from "../../assets/icons/success-icon.vue";
+import CloseIcon from "../../assets/icons/close-icon.vue";
 import gsap from "gsap";
 import type {
   ContactFormDefinition,
   ContactFormValues,
   CrmSubmitResult,
   ICrmFormClient,
-} from "../../../lib/crm/types";
-import { isCorrectEmailFormat, isCorrectLinkedInFormat } from "../../../helpers/form-validator.ts";
+} from "../../lib/crm/types";
+import { isCorrectEmailFormat, isCorrectLinkedInFormat } from "../../helpers/form-validator.ts";
 
 /* This component knows nothing about HubSpot, or about any other CRM. It is
  * handed the labels to render and something that can accept a submission; who

package/dist/src/{components/common → common}/forms/ResearchForm.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import InputText from '../InputText.vue'
 import Button from '../Button.vue'
-import { isCorrectEmailFormat } from "../../../helpers/form-validator.ts";
+import { isCorrectEmailFormat } from "../../helpers/form-validator.ts";
 
 const email = ref('')
 

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/{components/header → header}/mobile-menu.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import Button from "../common/Button.vue";
-import Shevron from "../../assets/icons/shevron.vue";
+import Shevron from "../assets/icons/shevron.vue";
 import { computed, onUnmounted, ref, watch } from "vue";
-import BackIcon from "../../assets/icons/back-icon.vue";
+import BackIcon from "../assets/icons/back-icon.vue";
 import ServicesList from "./services-list.vue";
 
 /* Everything this drawer used to read out of menu.ts, paths.ts and the site's

package/dist/src/{components/homepage → homepage}/technologies.vue

@@ -2,11 +2,11 @@
 import { computed, ref } from "vue";
 import { Carousel, type CarouselConfig, Slide } from "vue3-carousel";
 import "vue3-carousel/carousel.css";
-import { BREAKPOINTS } from "../../helpers/breakpoints.ts";
+import { BREAKPOINTS } from "../helpers/breakpoints.ts";
 import GlowButton from "../common/GlowButton.vue";
 import TypingEffect from "../common/effects/TypingEffect.vue";
 import TechnologyCard from "./technology-card.vue";
-import { carouselGestureLocker } from "../../helpers/carousel-gesture-locker.ts";
+import { carouselGestureLocker } from "../helpers/carousel-gesture-locker.ts";
 
 /* See ArticlePreview.vue: the fields read here, not the generated Strapi
  * `Technology`, which a caller may still pass unchanged. This component

package/dist/src/{components/homepage → 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/dist/theme.css

@@ -1,7 +1,7 @@
 /* ==========================================================================
  * CODECAVE Tailwind theme — @codecavepro/brand/theme.css
  * --------------------------------------------------------------------------
- * GENERATED from docs/theme.css — do not edit.
+ * GENERATED from src/styles/theme.css — do not edit.
  *
  * Declares the names Tailwind needs in order to emit CODECAVE utility
  * classes: bg-surface-primary, text-heading-lg, rounded-card and the rest.

package/dist/tokens.css

@@ -1,7 +1,7 @@
 /* ==========================================================================
  * CODECAVE design tokens — @codecavepro/brand/tokens.css
  * --------------------------------------------------------------------------
- * GENERATED from docs/colors_and_type.css — do not edit.
+ * GENERATED from src/styles/colors_and_type.css — do not edit.
  *
  * The custom properties and nothing else: no @font-face, no rules for html,
  * body, headings or links, no layout primitives, no components. Import this

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "2.2.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",
@@ -28,7 +28,7 @@
     "./tokens.css": "./dist/tokens.css",
     "./theme.css": "./dist/theme.css",
     "./fonts.css": "./dist/fonts.css",
-    "./components/*": "./dist/src/components/*",
+    "./components/*": "./dist/src/*",
     "./assets/*": "./dist/src/assets/*",
     "./helpers/*": "./dist/src/helpers/*",
     "./lib/*": "./dist/src/lib/*",