srcdev-nuxt-components 9.0.14 → 9.0.16

package/.claude/skills/components/services-card.md

@@ -53,6 +53,34 @@ The `actions` slot receives `serviceData` as a scoped prop so the consumer can c
 </ServicesCard>
 ```
 
+## Local style override scaffold
+
+When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+```vue
+<ServicesCard :style-class-passthrough="['my-card']" :service-data="service">
+  ...
+</ServicesCard>
+
+<style>
+/* ─── ServicesCard local overrides ─────────────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.services-card {
+  &.my-card {
+    /* Geometry — image */
+    /* .image-wrapper { border-radius: 1.2rem; } */
+
+    /* Colours */
+    /* .description { color: var(--brand-text-secondary); } */
+  }
+}
+</style>
+```
+
 ## Notes
 
 - Component is auto-imported in Nuxt — no import needed.

package/.claude/skills/components/services-section.md

@@ -104,6 +104,31 @@ Both slots receive `serviceData` as a scoped prop.
 </ServicesSection>
 ```
 
+## Local style override scaffold
+
+When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+```vue
+<ServicesSection :style-class-passthrough="['my-section']" :service-data="service">
+  ...
+</ServicesSection>
+
+<style>
+/* ─── ServicesSection local overrides ──────────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.services-section {
+  &.my-section {
+    /* Geometry — image wrapper */
+    /* .image-wrapper { border-radius: 1.2rem; } */
+  }
+}
+</style>
+```
+
 ## Notes
 
 - Component is auto-imported in Nuxt — no import needed.

package/.claude/skills/components/stepper-list.md

@@ -0,0 +1,227 @@
+# StepperList Component
+
+## Overview
+
+`StepperList` is a numbered/stepped list component where each item has a visual indicator (a counter bubble or custom icon) and a content area. Indicators can optionally be connected by a vertical line between them. The number of items is controlled by the `itemCount` prop — content is filled via **dynamic named slots**.
+
+---
+
+## Dynamic slot pattern
+
+`StepperList` generates slots based on `itemCount`. For `itemCount="3"` the following slots exist:
+
+| Slot | Purpose |
+|------|---------|
+| `#item-0` | Content of the first list item |
+| `#item-1` | Content of the second list item |
+| `#item-2` | Content of the third list item |
+| `#indicator-0` | Custom indicator replacing the default counter bubble for item 0 |
+| `#indicator-1` | Custom indicator replacing the default counter bubble for item 1 |
+| … | … |
+
+**Rules:**
+- Slots are always **zero-indexed**: first item = `item-0`, last item = `item-{itemCount - 1}`.
+- `item-{n}` slots are required if you want content in each row.
+- `indicator-{n}` slots are **optional**. When omitted, a CSS counter bubble is rendered automatically. When provided, the custom content replaces the counter entirely — the CSS counter is hidden for that item only.
+- You can mix custom indicators and counter bubbles across items in the same list.
+- Always set `itemCount` to match the number of `#item-*` slots you provide.
+
+---
+
+## Props reference
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `itemCount` | `number` | — | **Required.** Controls how many `<li>` elements are rendered and which slots exist. |
+| `tag` | `"ul" \| "ol"` | `"ul"` | Use `"ol"` for sequentially meaningful content (recipes, instructions). |
+| `indicatorAlignment` | `"top" \| "center"` | `"top"` | Vertical alignment of the indicator relative to each item's content. `"center"` suits single-line items; `"top"` suits multi-line content. |
+| `indicatorVariant` | `"disc" \| "circle" \| "square"` | `"disc"` | Visual style of the auto-generated counter bubble. |
+| `indicatorSize` | `string` | `"3rem"` | Any valid CSS length — controls the width/height of the indicator bubble. |
+| `connected` | `boolean` | `true` | Draws a vertical connector line between indicators. JS measures indicator positions to calculate the line height precisely. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root element. |
+
+---
+
+## Usage examples
+
+### Basic counter list (no indicator slots)
+
+```vue
+<StepperList :itemCount="3" indicatorVariant="disc">
+  <template #item-0><p>Plan your project goals</p></template>
+  <template #item-1><p>Set up your development environment</p></template>
+  <template #item-2><p>Ship and monitor</p></template>
+</StepperList>
+```
+
+Counter bubbles are rendered automatically via CSS — no `#indicator-*` slots needed.
+
+### Ordered list with connectors
+
+```vue
+<StepperList tag="ol" :itemCount="4" :connected="true" indicatorVariant="circle">
+  <template #item-0><p>Preheat the oven to 180°C</p></template>
+  <template #item-1><p>Sift together the flour and baking powder</p></template>
+  <template #item-2><p>Cream the butter and sugar until fluffy</p></template>
+  <template #item-3><p>Bake for 25–30 minutes</p></template>
+</StepperList>
+```
+
+### Custom indicator icons (SVG)
+
+```vue
+<StepperList :itemCount="3">
+  <template #indicator-0>
+    <svg class="indicator-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  </template>
+  <template #item-0><p>Identity verified</p></template>
+
+  <template #indicator-1>
+    <svg class="indicator-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  </template>
+  <template #item-1><p>Payment confirmed</p></template>
+
+  <template #indicator-2>
+    <svg class="indicator-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
+    </svg>
+  </template>
+  <template #item-2><p>Awaiting email confirmation</p></template>
+</StepperList>
+```
+
+Custom indicator SVGs should use the `indicator-icon` class — it applies `color: var(--stepper-list-icon)` and sizes the icon to match `indicatorSize`.
+
+### Mixed — custom icons for completed steps, counters for pending
+
+```vue
+<StepperList :itemCount="4" :connected="true">
+  <!-- Completed steps: custom checkmark icon -->
+  <template #indicator-0>
+    <svg class="indicator-icon" ...>...</svg>
+  </template>
+  <template #item-0><p>Account created</p></template>
+
+  <template #indicator-1>
+    <svg class="indicator-icon" ...>...</svg>
+  </template>
+  <template #item-1><p>Email verified</p></template>
+
+  <!-- Pending steps: no indicator slot → CSS counter bubble shown -->
+  <template #item-2><p>Choose a plan</p></template>
+  <template #item-3><p>Start building</p></template>
+</StepperList>
+```
+
+### Rich item content (heading + body)
+
+```vue
+<StepperList tag="ol" :itemCount="3">
+  <template #item-0>
+    <div>
+      <strong>Create your account</strong>
+      <p style="margin: 0.25rem 0 0">Enter your email and choose a password.</p>
+    </div>
+  </template>
+  <template #item-1>
+    <div>
+      <strong>Verify your email</strong>
+      <p style="margin: 0.25rem 0 0">Click the link we sent to your inbox.</p>
+    </div>
+  </template>
+  <template #item-2>
+    <div>
+      <strong>Start building</strong>
+      <p style="margin: 0.25rem 0 0">You're all set — open your dashboard.</p>
+    </div>
+  </template>
+</StepperList>
+```
+
+---
+
+## CSS custom properties
+
+Override these in your consuming component or theme to restyle the indicators and connectors:
+
+| Property | Used by |
+|----------|---------|
+| `--stepper-list-counter-disc-background` | Disc variant counter bubble background |
+| `--stepper-list-counter-disc-text` | Disc variant counter number colour |
+| `--stepper-list-counter-disc-border` | Disc variant counter border colour |
+| `--stepper-list-counter-circle-background` | Circle variant counter bubble background |
+| `--stepper-list-counter-circle-text` | Circle variant counter number colour |
+| `--stepper-list-counter-circle-border` | Circle variant counter border colour |
+| `--stepper-list-counter-square-background` | Square variant counter bubble background |
+| `--stepper-list-counter-square-text` | Square variant counter number colour |
+| `--stepper-list-counter-square-border` | Square variant counter border colour |
+| `--stepper-list-connector-color` | Connector line colour (defaults to `currentColor`) |
+| `--stepper-list-icon` | Icon colour for custom `indicator-icon` SVGs |
+
+---
+
+## Connector behaviour
+
+- Connectors are drawn as `::after` pseudo-elements on each `<li>` except the last.
+- JS (`ResizeObserver`) measures the bottom of each indicator and the top of the next to set `--_connector-top` and `--_connector-height` precisely, keeping the line flush between bubbles regardless of content height.
+- Before JS runs (SSR / initial paint), CSS fallback values approximate the correct position for `indicatorAlignment="top"`.
+- If `connected="false"`, no connectors are rendered and JS measurement is skipped.
+- Connectors recalculate automatically when `itemCount`, `connected`, or `indicatorAlignment` props change.
+
+---
+
+## Local style override scaffold
+
+When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+```vue
+<StepperList :style-class-passthrough="['my-stepper']" :item-count="3">
+  ...
+</StepperList>
+
+<style>
+/* ─── StepperList local overrides ──────────────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.stepper-list {
+  &.my-stepper {
+    /* Counter bubble — disc variant */
+    /* --stepper-list-counter-disc-background: var(--brand-primary); */
+    /* --stepper-list-counter-disc-text: white; */
+    /* --stepper-list-counter-disc-border: transparent; */
+
+    /* Counter bubble — circle variant */
+    /* --stepper-list-counter-circle-background: transparent; */
+    /* --stepper-list-counter-circle-text: var(--brand-primary); */
+    /* --stepper-list-counter-circle-border: var(--brand-primary); */
+
+    /* Counter bubble — square variant */
+    /* --stepper-list-counter-square-background: var(--brand-primary); */
+    /* --stepper-list-counter-square-text: white; */
+    /* --stepper-list-counter-square-border: transparent; */
+
+    /* Custom indicator icon colour */
+    /* --stepper-list-icon: var(--brand-primary); */
+
+    /* Connector line */
+    /* --stepper-list-connector-color: var(--brand-primary); */
+  }
+}
+</style>
+```
+
+---
+
+## Notes
+
+- Always keep `itemCount` in sync with the number of `#item-*` slots you provide — mismatches will render empty `<li>` rows.
+- Slot names are **zero-indexed** — `#item-0` not `#item-1`.
+- The `indicator-icon` class is defined inside the component CSS and sizes the SVG to `var(--_counter-size)` (driven by `indicatorSize`). Always add it to custom SVGs.
+- Auto-imported in Nuxt — no manual import needed.

package/.claude/skills/css-grid-max-width-gutters.md

@@ -0,0 +1,67 @@
+# CSS Grid — Max Width via Growing Gutters
+
+## Overview
+
+A pattern for capping the width of a central grid column without breaking full-bleed backgrounds. Instead of capping the column with `max-width`, the gutters grow to enforce the constraint. The centre column stays `1fr` and the layout never breaks.
+
+## The problem with capping the centre column
+
+Using `minmax(0, 1064px)` on the centre column caps its width but doesn't distribute the leftover space — it simply goes unused. Full-bleed backgrounds on adjacent rows break, and you lose the ability to use `subgrid`.
+
+## The pattern
+
+Grow the gutters instead:
+
+```css
+grid-template-columns: max(MIN_GUTTER, (100% - MAX_WIDTH) / 2) 1fr max(MIN_GUTTER, (100% - MAX_WIDTH) / 2);
+```
+
+- When the container is **narrower** than `MAX_WIDTH`: `(100% - MAX_WIDTH) / 2` is negative, `max()` clamps back to `MIN_GUTTER`. Gutters hold their minimum.
+- When the container is **wider** than `MAX_WIDTH`: gutters grow equally, enforcing the cap. The centre column never exceeds `MAX_WIDTH`.
+
+## Start-aligned variant
+
+When you want the content pinned to one side (e.g. left-aligned editorial layout):
+
+```css
+grid-template-columns: MIN_GUTTER minmax(0, MAX_WIDTH) 1fr;
+```
+
+Left gutter stays fixed, content column is capped at `MAX_WIDTH`, remaining space goes to the right.
+
+## In Vue with a prop
+
+Because `v-bind()` in `<style>` can't be nested inside CSS functions like `max()`, build the column string as a computed and bind the whole value:
+
+```ts
+// Props
+interface Props {
+  maxWidth?: string;        // e.g. "1064px"
+  contentAlign?: "start" | "center";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxWidth: undefined,
+  contentAlign: "center",
+});
+
+// Computed column string
+const gridColumns = computed(() => {
+  if (!props.maxWidth) return "16px 1fr 16px";
+  if (props.contentAlign === "start") return `16px minmax(0, ${props.maxWidth}) 1fr`;
+  return `max(16px, (100% - ${props.maxWidth}) / 2) 1fr max(16px, (100% - ${props.maxWidth}) / 2)`;
+});
+```
+
+```css
+.component {
+  display: grid;
+  grid-template-columns: v-bind(gridColumns);
+}
+```
+
+## Notes
+
+- `subgrid` on child elements still works — the column count doesn't change, only the gutter widths.
+- The minimum gutter (e.g. `16px`) is always enforced, so narrow viewports are safe without media queries.
+- `contentAlign` has no effect when `maxWidth` is not set — fall through to the fixed-gutter default.

package/.claude/skills/index.md

@@ -23,15 +23,26 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── storybook-add-font.md       — add a new font to Storybook
 ├── testing-add-unit-test.md    — create a Vitest unit test with snapshots
 ├── testing-add-playwright.md   — create a Playwright visual regression test
-├── theming-override-default.md — override the default theme with a custom colour scale
-├── colour-scheme-disable.md   — disable light/dark scheme support in a consumer app
+├── theming-override-default.md      — override the default theme with a custom colour scale
+├── colour-scheme-disable.md         — disable light/dark scheme support in a consumer app
+├── component-dynamic-slots.md        — named dynamic slots ($slots iteration) vs indexed dynamic slots (itemCount pattern)
+├── component-local-style-override.md — styleClassPassthrough + scoped style block for per-usage visual customisation
+├── component-prop-driven-container-layout.md — vary CSS grid layout inside @container queries using data-* attribute selectors
+├── css-grid-max-width-gutters.md             — cap a centre grid column width by growing gutters, with start/center alignment variants
+├── component-aria-landmark.md        — useAriaLabelledById composable: aria-labelledby for section/main/article/aside tags
 └── components/
+    ├── accordian-core.md       — AccordianCore indexed dynamic slots (accordian-{n}-summary/icon/content), exclusive-open grouping
     ├── eyebrow-text.md         — EyebrowText props, usage patterns, styling
     ├── hero-text.md            — HeroText props, usage patterns, styling
+    ├── layout-grid-by-cols.md  — LayoutGridByCols dynamic slots (item-{n}), props, column/gap/breakpoint decisions
     ├── layout-row.md           — LayoutRow variant guide, width/margin decisions, usage patterns
     ├── link-text.md            — LinkText props, slots, usage patterns, styling
+    ├── page-hero-highlights.md — PageHeroHighlights template: hero + highlights strip grid, CSS custom property theming
     ├── services-card.md        — ServicesCard props, actions slot, usage patterns
-    └── services-section.md     — ServicesSection props, summary-link/cta slots, summary vs full mode
+    ├── services-section.md     — ServicesSection props, summary-link/cta slots, summary vs full mode
+    ├── contact-section.md      — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
+    ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, connector behaviour
+    └── expanding-panel.md      — ExpandingPanel v-model, forceOpened, slots (summary/icon/content), ARIA wiring
 ```
 
 ## Skill file template

package/.claude/skills/storybook-add-story.md

@@ -174,6 +174,66 @@ template: `
 This keeps the ID wiring self-contained inside the component — the parent story just
 consumes what the slot exposes, rather than generating its own ID.
 
+### Extra controls that are not component props
+
+Use when you want a Storybook control that sets something other than a component prop — e.g. a CSS custom property toggle.
+
+`Meta<typeof Component>` is strict: its `argTypes`/`args` keys must match the component's actual props. Adding extras causes a TypeScript error. The fix is a `StoryArgs` type that covers both:
+
+```ts
+import { computed } from "vue"; // ← must be explicit in .ts files (not auto-imported)
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import ComponentName from "../ComponentName.vue";
+
+type StoryArgs = {
+  // mirror the component props you want controls for
+  tag?: "div" | "section";
+  // plus any extras
+  headerBackground?: string;
+};
+
+const meta: Meta<StoryArgs> = {  // ← StoryArgs, not typeof ComponentName
+  title: "...",
+  component: ComponentName,
+  argTypes: {
+    headerBackground: { control: "color", description: "Sets --my-header-bg" },
+  },
+  args: { headerBackground: "" },
+};
+
+export default meta;
+type Story = StoryObj<typeof ComponentName>; // ← still strict for individual stories
+```
+
+Strip extra args before `v-bind` using a `useStorySetup` helper in `setup()`:
+
+```ts
+function useStorySetup(args: StoryArgs) {
+  const bgStyles = computed(() => ({
+    ...(args.headerBackground ? { "--my-header-bg": args.headerBackground } : {}),
+  }));
+  const componentArgs = computed(() => {
+    const { headerBackground: _h, ...rest } = args;
+    return rest;
+  });
+  return { bgStyles, componentArgs };
+}
+
+export const Default: Story = {
+  render: (args: StoryArgs) => ({
+    components: { ComponentName },
+    setup() { return useStorySetup(args); },
+    template: `<ComponentName v-bind="componentArgs" :style="bgStyles" />`,
+  }),
+};
+```
+
+Key points:
+
+- `computed` is **not** auto-imported in `.ts` story files — import it explicitly from `"vue"`.
+- Extra args must be stripped before `v-bind` — spreading unknown keys onto a component makes them unknown HTML attributes.
+- CSS custom properties set via `:style` on the component root are picked up by `var()` in the component's scoped CSS.
+
 ## Notes
 
 - Use `table: { category: "..." }` in `argTypes` when a component has many props — it groups

package/.claude/skills/testing-add-unit-test.md

@@ -165,6 +165,34 @@ it("exposes headingId via scoped slot", async () => {
 - Always `afterEach(() => wrapper?.unmount())` to prevent test leaks.
 - Use a `createWrapper` helper to keep individual tests short.
 - Include at least one snapshot test per meaningful visual state.
+- `nextTick` is **not** auto-imported in test files — always import it explicitly: `import { nextTick } from "vue"`.
+
+## Fake timers
+
+`vitest.setup.ts` calls `vi.useFakeTimers()` globally and resets in `afterEach`. **Never** call `vi.useFakeTimers()`, `vi.useRealTimers()`, or `vi.runAllTimers()` inside a test file — it conflicts with the global setup and can cause infinite loops or bleed between tests.
+
+Use `vi.advanceTimersByTime(ms)` to move time forward by a specific amount. Avoid `vi.runAllTimers()` — it fires all queued timers including any that re-queue themselves, which loops infinitely.
+
+```ts
+// ✅
+vi.advanceTimersByTime(500);
+await nextTick();
+
+// ❌ — can loop infinitely if a timer re-queues itself
+vi.runAllTimers();
+```
+
+## Hyphenated prop attributes in tests
+
+When a component uses a hyphenated Vue prop like `:tab-index` or `:aria-label`, Vue renders it as the literal hyphenated DOM attribute. Assert with the hyphenated form — not the camelCase equivalent:
+
+```ts
+// ✅ — prop :tab-index renders as the DOM attribute "tab-index"
+expect(wrapper.find(".el").attributes("tab-index")).toBe("2");
+
+// ❌ — "tabindex" won't match
+expect(wrapper.find(".el").attributes("tabindex")).toBe("2");
+```
 
 ## Snapshot testing
 
@@ -195,6 +223,34 @@ const style = (el.element as HTMLElement).style;
 expect(style.getPropertyValue("--custom-prop")).toBe("expected-value");
 ```
 
+**`v-bind()` in CSS — root component only.** Vue's `v-bind(propName)` in a component's `<style>` block sets `--v-bind-propName` on that component's root element in JSDOM. This only works when the component under test **is** the root wrapper. When the component is rendered as a **child** inside a parent, JSDOM does not apply those inline styles — `getPropertyValue` returns `""`.
+
+```ts
+// ❌ Won't work — StepperList is a child; JSDOM doesn't apply its v-bind() styles
+const list = wrapper.find(".stepper-list");
+expect((list.element as HTMLElement).style.getPropertyValue("--v-bind-indicatorSize")).toBe("4rem");
+
+// ✅ Use findComponent + props() to test prop pass-through to a child component
+expect(wrapper.findComponent(StepperList).props("indicatorSize")).toBe("4rem");
+```
+
+## Testing prop pass-through to child components
+
+When a parent component forwards a prop to a child, use `findComponent` + `.props()` rather than inspecting the DOM:
+
+```ts
+import ChildComponent from "../../child/ChildComponent.vue";
+
+it("passes myProp to ChildComponent", async () => {
+  const wrapper = await mountSuspended(ParentComponent, {
+    props: { myProp: "value" },
+  });
+  expect(wrapper.findComponent(ChildComponent).props("myProp")).toBe("value");
+});
+```
+
+Import the child component directly in the test file — it is not auto-imported there.
+
 ## Mocking browser APIs
 
 Mock before the `describe` block if the component uses ResizeObserver, IntersectionObserver, etc.:

package/app/assets/styles/setup/01.config/index.css

@@ -1,3 +1,2 @@
 @import "./_normalise";
-@import "./_basic-resets";
 @import "./_head";

package/app/assets/styles/setup/03.theming/default/_dark.css

@@ -78,8 +78,8 @@
   /* ===========================================
      ANCHOR LINK VARIABLES
      =========================================== */
-  --colour-link-default: var(--blue-10);
-  --colour-link-hover: var(--blue-09);
+  --colour-link-default: var(--blue-02);
+  --colour-link-hover: var(--blue-03);
 
   /* ===========================================
      FORM INPUT VARIABLES

package/app/assets/styles/setup/04.elements/forms/02.typography.css

@@ -13,6 +13,7 @@
   --button-font-size: 1.6rem; /* 16px */
   --button-line-height: 1.4;
   --button-font-weight: 600;
+  --button-text-transform: none;
 
   /* Description */
   --field-description-font-size: 1.3rem;

package/app/assets/styles/setup/05.typography/02.utility-classes/_font-classes-page-link.css

@@ -1,5 +1,5 @@
 .page-link-large {
-  color: var(--theme-link-default);
+  color: var(--colour-link-default);
   font-size: var(--step-6);
   font-weight: 400;
   font-variation-settings: "wght" 400;
@@ -8,7 +8,7 @@
 }
 
 .page-link-large-semibold {
-  color: var(--theme-link-default);
+  color: var(--colour-link-default);
   font-size: var(--step-6);
   font-weight: 600;
   font-variation-settings: "wght" 600;
@@ -17,7 +17,7 @@
 }
 
 .page-link-medium {
-  color: var(--theme-link-default);
+  color: var(--colour-link-default);
   font-size: var(--step-5);
   font-weight: 400;
   font-variation-settings: "wght" 400;
@@ -26,7 +26,7 @@
 }
 
 .page-link-medium-semibold {
-  color: var(--theme-link-default);
+  color: var(--colour-link-default);
   font-size: var(--step-5);
   font-weight: 600;
   font-variation-settings: "wght" 600;
@@ -35,7 +35,7 @@
 }
 
 .page-link-normal {
-  color: var(--theme-link-default);
+  color: var(--colour-link-default);
   font-size: var(--step-4);
   font-weight: 400;
   font-variation-settings: "wght" 400;
@@ -44,7 +44,7 @@
 }
 
 .page-link-normal-semibold {
-  color: var(--theme-link-default);
+  color: var(--colour-link-default);
   font-size: var(--step-4);
   font-weight: 600;
   font-variation-settings: "wght" 600;
@@ -53,7 +53,7 @@
 }
 
 .page-link-small {
-  color: var(--theme-link-default);
+  color: var(--colour-link-default);
   font-size: var(--step-3);
   font-weight: 400;
   font-variation-settings: "wght" 400;
@@ -62,7 +62,7 @@
 }
 
 .page-link-small-semibold {
-  color: var(--theme-link-default);
+  color: var(--colour-link-default);
   font-size: var(--step-3);
   font-weight: 600;
   font-variation-settings: "wght" 600;
@@ -71,7 +71,7 @@
 }
 
 .page-link-xsmall {
-  color: var(--theme-link-default);
+  color: var(--colour-link-default);
   font-size: var(--step-2);
   font-weight: 400;
   font-variation-settings: "wght" 400;
@@ -80,7 +80,7 @@
 }
 
 .page-link-xsmall-semibold {
-  color: var(--theme-link-default);
+  color: var(--colour-link-default);
   font-size: var(--step-2);
   font-weight: 600;
   font-variation-settings: "wght" 600;
@@ -100,16 +100,16 @@
 .page-link-xsmall-semibold {
   margin: 0;
   &:visited {
-    color: var(--theme-link-default);
+    color: var(--colour-link-default);
   }
 
   &:hover {
-    color: var(--theme-link-hover);
+    color: var(--colour-link-hover);
   }
 
   &:focus-visible {
-    color: var(--theme-link-hover);
-    outline: 2px solid var(--theme-link-default);
+    color: var(--colour-link-hover);
+    outline: 2px solid var(--colour-link-default);
     outline-offset: 3px;
     border-radius: 4px;
   }

package/app/assets/styles/setup/index.css

@@ -1,4 +1,3 @@
-/* @layer reset, colours, theming, form-tokens, typography, a11y, utilities, components; */
 @layer reset, colours, theming, form-tokens, typography, a11y, components, utilities;
 
 @import "./01.config/" layer(reset);