@cognite/aura 0.1.7 → 0.2.0

package/DESIGN.md

@@ -8,14 +8,14 @@ Aura is the design system for Cognite Data Fusion experiences: composable UI pri
 
 The canonical token files (`colors.css`, `styles.source.css`) live in the Aura library repo under `src/`. In a consuming app they are available through the published package — import from `@cognite/aura/colors.css` and `@cognite/aura/styles.css`. Do not look for `src/colors.css` next to your app code; resolve token names via your IDE's autocomplete on `@cognite/aura`, or consult the tables in [Tokens](#tokens) below.
 
-**Code:** In Fusion / host apps (example convention), ship UI from Aura exports (`@cognite/aura/components`, [Storybook](https://cognitedata.github.io/aura/storybook)) under e.g. `src/components/ui`; prefer **CVA** variants. **[Interaction states](#interaction-states)**, **[Heuristics](#heuristics)**, and **[Content](#content)** define how to use primitives — prefer component APIs over reimplementing or overriding internals when a variant already matches intent. **Prop names, `size` values, and subcomponents** are **not** duplicated here; use [Storybook](https://cognitedata.github.io/aura/storybook) and TypeScript types from `@cognite/aura/components` as the source of truth. For color in product UI, use tokens — not raw `hex` / `rgb` / `hsl` when a semantic or base token exists; details under **[Tokens](#tokens)**.
+**Code:** In Fusion / host apps (example convention), ship UI from Aura exports (`@cognite/aura/components`, [Storybook](https://storybook-aura-23638.fusion-preview.preview.cogniteapp.com)) under e.g. `src/components/ui`; prefer **CVA** variants. **[Interaction states](#interaction-states)**, **[Heuristics](#heuristics)**, and **[Content](#content)** define how to use primitives — prefer component APIs over reimplementing or overriding internals when a variant already matches intent. **Prop names, `size` values, and subcomponents** are **not** duplicated here; use [Storybook](https://storybook-aura-23638.fusion-preview.preview.cogniteapp.com), the [Aura design system documentation](https://docs.cognite.com/aura-design-system/get-started) (foundations, primitives, installation), and TypeScript types from `@cognite/aura/components` as the source of truth. For color in product UI, use tokens — not raw `hex` / `rgb` / `hsl` when a semantic or base token exists; details under **[Tokens](#tokens)**.
 
 ## Dashboard quick start (agent checklist)
 
 For pages with data-heavy layouts — cards, charts, metric tiles — work through these steps before writing component code.
 
 - [ ] **Tokens** — confirm all colors use semantic or chart tokens, no raw hex. Metric tiles: `decorative-*`. Data series: `chart-*`. Status: `info-*`, `success-*`, `warning-*`, `destructive-*`. See [Tokens → Color](#color).
-- [ ] **Layout** — use a 12-column grid with `gap-4` or `gap-6`. Tile widths: `col-span-12 sm:col-span-6 lg:col-span-3`. Cap the page frame with `max-w-[min(100%,var(--container-8xl))]`. See [Grids and layouts](#grids-and-layouts) and [Storybook grid patterns](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--grid-patterns-reference).
+- [ ] **Layout** — use a 12-column grid with `gap-4` or `gap-6`. Tile widths: `col-span-12 sm:col-span-6 lg:col-span-3`. Cap the page frame with `max-w-[min(100%,var(--container-8xl))]`. 
 - [ ] **Cards** — use the `Card` component with title, description, and a primary action. Do not stack unrelated actions in the same card. See [Heuristics §6.1](#61-grouping-and-proximity).
 - [ ] **Loading states** — every data region must show `Shimmer` (known layout) or `Loader` (unknown layout) while fetching. See [Heuristics §1.1](#11-loading-states).
 - [ ] **Status signals** — default to **Badge** or compact status cards for repeated states; keep **Alert** to one page-level inline instance unless multiple independent incidents each need separate action. See [Alert vs Banner vs Badge vs Sonner](#alert-vs-banner-vs-badge-vs-sonner).
@@ -32,7 +32,7 @@ For pages with data-heavy layouts — cards, charts, metric tiles — work throu
 
 **Scope — two layers**
 
-- **`@cognite/aura`:** primitives exported from this library ([Storybook](https://cognitedata.github.io/aura/storybook)). **Components:** lines below name Aura exports where they exist.
+- **`@cognite/aura`:** primitives exported from this library ([Storybook](https://storybook-aura-23638.fusion-preview.preview.cogniteapp.com)). **Components:** lines below name Aura exports where they exist.
 - **Fusion / app shell:** patterns such as global **Topbar**, **Sonner** toasts, **AlertDialog**, **Sheet** / **Drawer**, **Tabs**, **SegmentedControl**, **Checkbox** / **Radio** / **Switch**, **ContextMenu**, or **EmptyState** may live **outside** this package — **Must** still follow the same **Tokens**, **Interaction states**, and severity rules using your shell’s components or Radix-style primitives themed with Aura.
 - **Minimal or standalone apps** (no Fusion shell): apply the **same tokens** and **interaction rules** with Aura primitives and your stack’s equivalents. **Must** rules that name shell-only components (**Topbar**, **Sonner**, **AlertDialog**, **Sheet**, …) apply **when that capability exists** — treat them as **Should** / **when available** and substitute with the closest Aura or Radix pattern; wire **TooltipProvider** (or your tooltip root) at app root wherever **Tooltip** is used. Do not invent a fake shell just to satisfy a checklist.
 
@@ -374,7 +374,7 @@ Information **must** be scannable and oriented before action.
 
 **Rules**
 
-- **Should** verify layouts at common widths (e.g. 768 / 1024 / 1440px) when shipping responsive surfaces (see **[Grids and layouts](#grids-and-layouts)**).
+- **Should** verify layouts at common widths (e.g. 768 / 1024 / 1440px) when shipping responsive surfaces.
 - **Should** prefer **Dialog** / shell **Drawer** for secondary tasks on narrow viewports instead of cramming wide panels.
 - **Avoid** hard-coded pixel widths that bypass Tailwind and Aura layout tokens.
 
@@ -469,7 +469,7 @@ When splitting or stripping this doc for agents:
 - Keep **Must** / **Should** / **Avoid** / **must not** wording — severity is the routing signal.
 - Keep each **Applies when:** line — it tells the agent which subsection fires.
 - Keep **Aura components:** lines aligned with [`src/components/index.ts`](./src/components/index.ts) exports (public entry for `@cognite/aura/components`); treat **App / Fusion shell** lines as integration responsibilities, not as Aura package exports.
-- Preserve links: [Aura Storybook](https://cognitedata.github.io/aura/storybook). Fetch current prop names from Storybook or source before codegen.
+- Preserve links: [Aura Storybook](https://storybook-aura-23638.fusion-preview.preview.cogniteapp.com); [Aura documentation](https://docs.cognite.com/aura-design-system/get-started) for published guides. Fetch current prop names from Storybook or source before codegen.
 - If you split by section (§1–§7), repeat the **Severity** and **Scope** bullets at the top of each file so standalone chunks stay interpretable.
 - Preserve **[Content](#content)** for action verbs, date/time rules, and tone; agents generating strings should follow it alongside **Heuristics**.
 
@@ -500,7 +500,7 @@ Tables in this section use **CSS role names** (e.g. `link-foreground`, `card-bac
 | `destructive-background` | `bg-destructive-background`, `text-destructive-foreground-on-critical` (on surface) | Destructive actions — pairings in **Semantic colors** |
 | `info-background`, `success-background`, … | `bg-info-background`, `text-info-foreground`, … | Full names match **Semantic colors** token columns |
 
-Semantic utilities use the **full token name** as the Tailwind segment (e.g. `bg-info-background`, not `bg-info`). For **charts**, utilities follow the **Chart tokens** names (`bg-chart-fjord-solid`, `bg-chart-gridlines`, …). For exhaustive coverage, use [`src/colors.css`](./src/colors.css) or your IDE on `@cognite/aura`.
+Semantic utilities use the **full token name** as the Tailwind segment (e.g. `bg-info-background`, not `bg-info`). For **charts**, utilities follow the **Chart tokens** names (`bg-chart-fjord-color-1`, `bg-chart-gridlines`, …). For exhaustive coverage, use [`src/colors.css`](./src/colors.css) or your IDE on `@cognite/aura`.
 
 Tables below list **approximate hex** resolved from [`src/colors.css`](./src/colors.css) at build time; the source of truth is the synced file (some entries are `rgba()`).
 
@@ -531,7 +531,7 @@ Aura groups color into **Base** (~80–90% of UI), **Semantic** (status and feed
 | `popover-background` | `#FFFFFF` | `#212426` | Top-layer surfaces with shadow (dialogs, popovers) |
 | `raised-background` | `#2D3134` | `#40464A` | Tooltips, Sonner toasts — floats above page |
 | `disabled-background` | `#F1F2F3` | `#2D3134` | Disabled inputs and controls |
-| `overlay-background` | `rgba(2, 6, 23, 0.2)` | `rgba(226, 232, 240, 0.2)` | Scrim behind modals |
+| `overlay-background` | `#7C868E80` | `#7C868E80` | Scrim behind modals |
 | `background-fixed-dark` | `#212426` | `#212426` | Must stay **dark** in both themes |
 | `background-fixed-light` | `#FFFFFF` | `#FFFFFF` | Must stay **light** in both themes |
 | `accent-background-fixed-dark` | `#2D3134` | `#2D3134` | Persistent dark accent chrome (e.g. sidebar) |
@@ -543,7 +543,7 @@ Aura groups color into **Base** (~80–90% of UI), **Semantic** (status and feed
 | `foreground` | `#191B1D` | `#F1F2F3` | Primary text and icons |
 | `secondary-foreground` | `#40464A` | `#D4D7D9` | Supporting text and icons |
 | `muted-foreground` | `#6D767E` | `#A5ABB1` | Tertiary / low emphasis |
-| `disabled-foreground` | `#BBC0C4` | `#5E666D` | Disabled text and icons |
+| `disabled-foreground` | `#D4D7D9` | `#5E666D` | Disabled text and icons |
 | `link-foreground` | `#486AED` | `#1742E7` | Text links |
 | `foreground-on-primary` | `#F1F2F3` | `#191B1D` | On `primary-background` |
 | `foreground-on-active` | `#F1F2F3` | `#191B1D` | On `active-background` |
@@ -565,7 +565,7 @@ Aura groups color into **Base** (~80–90% of UI), **Semantic** (status and feed
 | `ring` | `#7081C7` | `#7081C7` | Focus ring outer (maps to `--shadow-focus-ring`) |
 | `ring-muted` | `#B5BEE2` | `#B5BEE2` | Focus ring inner companion |
 
-Also generated: `ring-critical`, `ring-critical-shadow` for destructive / invalid focus (see **Effects — Focus rings**).
+Also generated: `ring-destructive`, `ring-destructive-muted` for destructive / invalid focus (see **Effects — Focus rings**).
 
 #### Semantic colors
 
@@ -601,7 +601,7 @@ Each family has **default** pairings (theme-switching surfaces) and **muted** pa
 | :--- | :--- | :--- | :--- |
 | `warning-background` | `#FFE3A2` | `#FFE3A2` | Warning surface |
 | `warning-background-hover` | `#FFD062` | `#FFF1D0` | Hover on `warning-background` |
-| `warning-foreground` | `#E19E00` | `#D8BF00` | Text near warning on standard surfaces |
+| `warning-foreground` | `#C18800` | `#D8BF00` | Text near warning on standard surfaces |
 | `warning-foreground-on-warning` | `#755200` | `#5B4000` | Text **on** `warning-background` |
 | `warning-muted-background` | `#FFF1D0` | `#2D3134` | Warning on dark chrome |
 
@@ -630,21 +630,21 @@ Each family has **default** pairings (theme-switching surfaces) and **muted** pa
 
 #### Decorative colors
 
-For **small accents** (badges, avatars, empty states) where color differentiates but does **not** signal status — use **Chart tokens** for plot colors, not this ramp, unless a design explicitly maps a tile to a series color. Pattern: `decorative-{ramp}-background`, `decorative-{ramp}-background-hover`, `decorative-{ramp}-foreground`.
+For **small accents** (badges, avatars, empty states) where color differentiates but does **not** signal status — use **Chart tokens** for plot colors, not this ramp, unless a design explicitly maps a tile to a series color. Pattern: `decorative-background-{ramp}`, `decorative-background-{ramp}-hover`, `decorative-foreground-{ramp}`.
 
 **Preference order for new work:**
 
 | Priority | Ramp | Background | Foreground |
 | :---: | :--- | :--- | :--- |
-| 1 | Fjord | `decorative-fjord-background` | `decorative-fjord-foreground` |
-| 2 | Nordic | `decorative-nordic-background` | `decorative-nordic-foreground` |
-| 3 | Aurora | `decorative-aurora-background` | `decorative-aurora-foreground` |
-| 4 | Dusk | `decorative-dusk-background` | `decorative-dusk-foreground` |
-| 5 | Orange | `decorative-orange-background` | `decorative-orange-foreground` |
-| 6 | Sky | `decorative-sky-background` | `decorative-sky-foreground` |
-| 7 | Mountain | `decorative-mountain-background` | `decorative-mountain-foreground` |
+| 1 | Fjord | `decorative-background-fjord` | `decorative-foreground-fjord` |
+| 2 | Nordic | `decorative-background-nordic` | `decorative-foreground-nordic` |
+| 3 | Aurora | `decorative-background-aurora` | `decorative-foreground-aurora` |
+| 4 | Dusk | `decorative-background-dusk` | `decorative-foreground-dusk` |
+| 5 | Orange | `decorative-background-orange` | `decorative-foreground-orange` |
+| 6 | Sky | `decorative-background-sky` | `decorative-foreground-sky` |
+| 7 | Mountain | `decorative-background-mountain` | `decorative-foreground-mountain` |
 
-Example (fjord ramp): light `decorative-fjord-background` → `#CCD5FA` (fjord-200), `decorative-fjord-foreground` → `#1234B6` (fjord-700); dark → `#AEBDF7` / `#0D2582` (fjord-300 / fjord-800). Every ramp resolves in [`src/colors.css`](./src/colors.css).
+Example (fjord ramp): light `decorative-background-fjord` → `#CCD5FA` (fjord-200), `decorative-foreground-fjord` → `#1234B6` (fjord-700); dark → `#AEBDF7` / `#0D2582` (fjord-300 / fjord-800). Every ramp resolves in [`src/colors.css`](./src/colors.css).
 
 #### Chart tokens
 
@@ -652,8 +652,7 @@ Example (fjord ramp): light `decorative-fjord-background` → `#CCD5FA` (fjord-2
 
 | Token | Use |
 | :--- | :--- |
-| `chart-fjord-solid` … `chart-orange-solid` | Solid series stroke / marker color |
-| `chart-{ramp}-opacity-1` … `chart-{ramp}-opacity-5` | Area-fill opacity steps (lightest → strongest) |
+| `chart-{ramp}-color-1` … `chart-{ramp}-color-6` | Alpha-based series / area-fill steps (strongest → lightest) |
 | `chart-gridlines` | Grid lines |
 
 Default series order: **fjord → nordic → aurora → dusk → orange**.
@@ -767,9 +766,9 @@ Aura is visually **flat**; surfaces, spacing, and typography do most structure.
 | Tailwind shadow | Built from `--effect-shadow-*` | Light (α) | Dark (α) | Use (per theme comments in CSS) |
 | :--- | :--- | :--- | :--- | :--- |
 | `shadow-sm` | `--effect-shadow-sm` | 0.04 | 0.2 | Tooltips, small floating containers |
-| `shadow-default` | md + sm layers | 0.05 + 0.04 | 0.3 + 0.2 | Menus, popovers, hover cards |
-| `shadow-md` | md + sm layers | 0.05 + 0.04 | 0.3 + 0.2 | Sonner toasts, temporary elevated elements |
-| `shadow-lg` | lg + sm layers | 0.06 + 0.04 | 0.4 + 0.2 | Modals / dialogs **without** full backdrop overlay |
+| `shadow-default` | md + sm layers | 0.05 + 0.04 | 0.302 + 0.2 | Menus, popovers, hover cards |
+| `shadow-md` | lg + md layers | 0.06 + 0.05 | 0.4 + 0.302 | Sonner toasts, temporary elevated elements |
+| `shadow-lg` | xl + lg layers | 0.10 + 0.06 | 0.6 + 0.4 | Modals / dialogs **without** full backdrop overlay |
 | `shadow-xl` | xl + lg layers | 0.10 + 0.06 | 0.6 + 0.4 | Modals / dialogs **with** backdrop overlay |
 
 Exact pixel stacks: `--shadow-sm` … `--shadow-xl` in [`src/styles.source.css`](./src/styles.source.css).
@@ -780,8 +779,8 @@ Shadow-based (not `outline`) for consistent rendering:
 
 | Token | Composition | Use |
 | :--- | :--- | :--- |
-| `--shadow-focus-ring` | `0 0 0 2px var(--ring), 0 0 0 4px var(--ring-muted)` | Default focus on interactive controls |
-| `--shadow-focus-ring-destructive` | `0 0 0 2px var(--ring-critical), 0 0 0 4px var(--ring-critical-shadow)` | Destructive / invalid focus |
+| `--shadow-focus-ring` | `0 0 0 1px var(--ring), 0 0 0 3px var(--ring-muted)` | Default focus on interactive controls |
+| `--shadow-focus-ring-destructive` | `0 0 0 1px var(--ring-destructive), 0 0 0 3px var(--ring-destructive-muted)` | Destructive / invalid focus |
 
 #### Opacity
 
@@ -789,7 +788,7 @@ Shadow-based (not `outline`) for consistent rendering:
 | :--- | :--- | :--- |
 | `--opacity-10` … `--opacity-80` (+ `*-inverted`) | rgba steps | Overlays, glass effects |
 | Overlay scrim | via `overlay-background` | Modal backdrop (see color tables) |
-| Chart fills | `chart-*-opacity-*` | See **Chart tokens** |
+| Chart fills | `chart-*-color-*` | See **Chart tokens** |
 
 #### Motion (reference)
 
@@ -797,60 +796,11 @@ Short UI motion (e.g. accordion height) uses **~0.2s ease-out** in utilities; th
 
 ---
 
-## Grids and layouts
+### Layout and spacing
 
-**What this section is:** How to think about **width**, **reading measure**, **vertical rhythm**, and **responsive composition** when building with Aura’s Tailwind v4 theme. Visual grids, column spans, and compositions are maintained in Storybook; this section captures the **rules and links** agents and engineers should follow first.
+Width and spacing values in this subsection come from [`src/styles.source.css`](./src/styles.source.css) (`@theme inline` and `:root`) where noted. **Gutters and gaps** use the same **4px-based** spacing scale as **[Tokens → Size and dimensions](#size-and-dimensions)**.
 
-### Storybook layout reference
-
-| Topic | Storybook |
-| :--- | :--- |
-| Layout overview (docs) | [Foundations / Layout — Docs](https://cognitedata.github.io/aura/storybook/?path=/docs/foundations-layout--docs) |
-| **Column spans** | [Column spans](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--column-spans) |
-| **Layout compositions** | [Compositions](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--compositions) |
-| **Grid patterns** | [Grid patterns reference](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--grid-patterns-reference) |
-| **Container queries** | [Container queries](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--container-queries) |
-| **Breakpoints** | [Breakpoints](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--breakpoints) |
-
-### Copy-paste patterns (Tailwind)
-
-Abbreviated recipes for local iteration when Storybook is not open — **[Grid patterns reference](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--grid-patterns-reference)** and related stories remain the source of truth; tune spans and gaps to match product templates.
-
-**Dashboard main frame** (wide upper bound from **Width and max content**):
-
-```html
-<div class="mx-auto w-full max-w-[min(100%,var(--container-8xl))] px-4 md:px-6">
-  <!-- page content -->
-</div>
-```
-
-**12-column metric row** (example tile shrinks from full width to quarter width at large breakpoints):
-
-```html
-<div class="grid grid-cols-12 gap-4">
-  <section class="col-span-12 sm:col-span-6 lg:col-span-3">…</section>
-  <!-- repeat tiles -->
-</div>
-```
-
-**12-column dashboard tile row** (copy-pasteable baseline):
-
-```html
-<div class="mx-auto w-full max-w-[min(100%,var(--container-8xl))] px-4 md:px-6">
-  <div class="grid grid-cols-12 gap-4 lg:gap-6">
-    <section class="col-span-12 sm:col-span-6 lg:col-span-3">…</section>
-    <section class="col-span-12 sm:col-span-6 lg:col-span-3">…</section>
-    <section class="col-span-12 sm:col-span-6 lg:col-span-3">…</section>
-    <section class="col-span-12 sm:col-span-6 lg:col-span-3">…</section>
-  </div>
-</div>
-```
-
-Adjust `col-span-*` values to match your content hierarchy. Always verify against [Storybook grid patterns](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--grid-patterns-reference).
-
-**Numbers** in the tables below come from [`src/styles.source.css`](./src/styles.source.css) (`@theme inline` and `:root`) where applicable. **Gutters and gaps** use the same **4px-based** spacing scale as **[Tokens → Size and dimensions](#size-and-dimensions)**.
-
-### Body text reading width
+**Body text reading width**
 
 - **Must** cap **continuous body text** (paragraphs, descriptions, long labels) at a **maximum width of 600px** for comfortable reading.
 - **Must** apply that limit to the **text column only** — companion UI (icons, thumbnails, side metadata, charts, code blocks) **may** sit outside that 600px band in the same row or card; do not shrink the text measure to absorb those elements.
@@ -867,34 +817,26 @@ Aura adjusts Tailwind **container** breakpoints where the default scale is too w
 
 Prefer **`max-w-*`** (and other width utilities) tied to the theme over ad-hoc pixel `max-width` on wrappers. **Global frame** width (shell chrome) is defined by the **Fusion / product** host; **inside** the frame, combine these tokens with responsive utilities so regions reflow predictably.
 
-### Column spans, compositions, and grids
-
-- **Must** follow the **column span** and **composition** patterns from Storybook when laying out multi-column app and marketing surfaces — see [Column spans](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--column-spans) and [Compositions](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--compositions).
-- **Must** align card grids, lists, and dashboard tiles to the **grid pattern** reference — see [Grid patterns reference](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--grid-patterns-reference).
-- **Should** use **container queries** where a component’s layout should react to its **parent** width, not only the viewport — see [Container queries](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--container-queries).
-- **Should** use the canonical **viewport breakpoints** for page-level reflow — see [Breakpoints](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--breakpoints).
 
-### Specialized layout variables
+### Specialized variables
 
 | Variable | Value | Use |
 | :--- | :--- | :--- |
 | `--message-content-max-width` | `80%` | Primary column for chat / assistant **Message** content in wide threads |
 | `--drawer-max-height` | `80vh` | Maximum height for top/bottom drawer-style panels when the host implements them |
-| `--alert-icon-width` | `calc(var(--spacing) * 4)` (typically **16px**) | Fixed icon column in the **Alert** grid so titles and descriptions align |
+| `--alert-icon-width` | `calc(var(--spacing) * 4)` (typically **16px**) | Fixed icon column in the **Alert** layout so titles and descriptions align |
 
-### Grid and spacing usage
+### Regional spacing
 
-- **Must** use the **spacing scale** for padding, margin, and `gap` between layout regions (`gap-*`, `p-*`, `m-*`) — see **Tokens → Size and dimensions**.
+- **Must** use the **spacing scale** for padding, margin, and `gap` between regions (`gap-*`, `p-*`, `m-*`) — see **Tokens → Size and dimensions**.
 - **Should** keep major block **padding** and **gap** on **4px** multiples so control heights, radii, and typography line up visually.
 - **Should** group related regions in **Card** (and **Separator** when two unrelated groups share a container) before mixing unrelated actions into the same band — see **Heuristics §6**.
 - **Avoid** one-off pixel gutters that ignore the scale unless matching a fixed graphic asset.
 
 ### Responsive behavior
 
-- **Should** treat viewport breakpoints as defined in Storybook — [Breakpoints](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--breakpoints) — and still sanity-check primary templates at about **768px**, **1024px**, and **1440px** in the Fusion shell or embedded contexts.
-- **Should** use **container queries** for component-local layout where the preview shows it — [Container queries](https://cognitedata.github.io/aura/storybook/?path=/story/foundations-layout--container-queries).
 - **Should** move secondary work into **Dialog** or a shell **Drawer** on narrow widths instead of compressing multi-column chrome.
-- **Avoid** single-breakpoint layouts tuned only to a static design frame — use breakpoints, **container queries**, wrapping, and CSS grid `minmax` / `fr` where content must grow and shrink.
+- **Avoid** single-breakpoint layouts tuned only to a static design frame — use breakpoints, wrapping, and flexible sizing utilities where content must grow and shrink.
 
 ### Shell vs content
 

package/README.md

@@ -4,20 +4,20 @@ Aura exports Cognite's UI components, styles, utilities, and ESLint guidance for
 
 ## DESIGN.md (Google design.md linter)
 
-[`DESIGN.md`](./DESIGN.md) is linted with [`@google/design.md`](https://www.npmjs.com/package/@google/design.md) (listed in this package’s `devDependencies`). After `pnpm install` in the Fusion workspace, run the CLI’s `lint` subcommand—no `dlx` needed.
+[`DESIGN.md`](./DESIGN.md) is linted with [`@google/design.md`](https://www.npmjs.com/package/@google/design.md) via `npx`, so Aura does not need a direct package dependency on the linter.
 
 Published installs ship this spec at the package root; you can resolve it as `@cognite/aura/DESIGN.md` (for example with `import.meta.resolve` or your bundler’s raw import).
 
 From `fusion/libs/aura`:
 
 ```sh
-pnpm exec design.md lint ./DESIGN.md
+npx --yes @google/design.md lint ./DESIGN.md
 ```
 
 From the Fusion workspace root:
 
 ```sh
-pnpm --filter @cognite/aura exec design.md lint ./DESIGN.md
+cd libs/aura && npx --yes @google/design.md lint ./DESIGN.md
 ```
 
 Or with Nx: