Chore release 8.8.0 into release

.cursor/rules/css-modules.mdc

@@ -0,0 +1,41 @@
+---
+description: Ensures CSS Modules file follows stylelint and Opentrons CSS conventions
+globs: '**/*.module.css'
+---
+
+## CSS Modules Implementation Guidelines for Opentrons
+
+### File Naming Convention
+
+- CSS file name should be component name (all lowercase) followed by `.module.css`
+- Example: `navbar.module.css`, `button.module.css`, `modal.module.css`
+
+### CSS Variables Usage
+
+- **MUST USE** CSS variables from `components/src/styles/global.css` for:
+
+  - `color` and `background-color` (e.g., `var(--white)`, `var(--black-90)`, `var(--blue-50)`)
+  - `padding` and `margin` (e.g., `var(--spacing-8)`, `var(--spacing-24)`)
+  - `gap` (e.g., `var(--spacing-12)`, `var(--spacing-16)`)
+  - `border-radius` (e.g., `var(--border-radius-4)`, `var(--border-radius-8)`)
+  - `font-size` (e.g., `var(--font-size-h3)`, `var(--font-size-p)`)
+  - `line-height` (e.g., `var(--line-height-20)`, `var(--line-height-24)`)
+  - `font-weight` (e.g., `var(--font-weight-regular)`, `var(--font-weight-bold)`)
+
+- **DO NOT USE** CSS variables for:
+  - `width` and `height` - use explicit values (e.g., `2rem`, `100vh`, `5.625rem`)
+
+### CSS Class Naming
+
+- Use snake_case for class names (e.g., `.navbar_link`, `.nav_container`, `.bottom_container`)
+- Use descriptive names that reflect the component's purpose
+
+### Global Selectors
+
+- When targeting React Router or other global classes, use `:global()` syntax
+- Example: `.navbar_link:global(.active)` for React Router's active class
+
+### Linting
+
+- Always check CSS Modules files follow stylelint by running `make lint-css`
+- Ensure all styles pass linting before committing