docs: update references to scss

Author: luarmr

.cursor/rules/design.mdc

@@ -1,6 +1,6 @@
 ---
 description: Design system and UI consistency guidelines for Label Studio
-globs: **/*.tsx,**/*.jsx,**/*.scss,**/*.css
+globs: **/*.tsx,**/*.jsx,**/*.css
 alwaysApply: false
 ---
 
@@ -51,7 +51,7 @@ This rule provides guidance for creating user interfaces consistent with the Hum
 
 ## Design Tokens
 
-**Location**: `web/libs/ui/src/tokens/tokens.scss`
+**Location**: `web/libs/ui/src/tokens/tokens.prefix.css`
 
 **Always Use Semantic Tokens**:
 
@@ -143,9 +143,9 @@ import { cn } from '@humansignal/core';
 <div className="p-200 bg-grape-600 text-16">
 ```
 
-**SCSS Modules** (co-located `.module.scss`):
-```scss
-// Create component tokens → semantic tokens
+**CSS Modules** (co-located `.module.css`):
+```css
+/* Component tokens → semantic tokens */
 .component {
   --component-bg: var(--color-neutral-surface);
   --component-text: var(--color-neutral-content);
@@ -156,7 +156,7 @@ import { cn } from '@humansignal/core';
   padding: var(--component-spacing);
 }
 
-// Variant pattern
+/* Variant pattern */
 .variant-primary {
   --component-bg: var(--color-primary-surface);
   --component-text: var(--color-primary-surface-content);
@@ -187,7 +187,7 @@ See `react.mdc` for complete React patterns.
 ```
 button/
   button.tsx
-  button.module.scss
+  button.module.css
   button.stories.tsx
   button.test.tsx
   index.ts
@@ -196,7 +196,7 @@ button/
 **Pattern**:
 ```tsx
 import { forwardRef } from 'react';
-import styles from './button.module.scss';
+import styles from './button.module.css';
 import { cn } from '@humansignal/core';
 
 export interface ButtonProps {
@@ -315,7 +315,7 @@ export const Primary: Story = {
 
 **Files**:
 - Components: `web/libs/ui/src/lib/`
-- Tokens: `web/libs/ui/src/tokens/tokens.scss`
+- Tokens: `web/libs/ui/src/tokens/tokens.prefix.css`
 - Storybook: `yarn nx storybook storybook`
 
 **Related Rules**:

.cursor/rules/react.mdc

@@ -31,7 +31,7 @@ globs: **/*.jsx,**/*.tsx
   ```
   component-name/
     component-name.tsx
-    component-name.module.scss
+    component-name.module.css
     component-name.test.tsx
     index.ts
   ```
@@ -64,7 +64,7 @@ globs: **/*.jsx,**/*.tsx
 
 ## Tooling
 - Use Biome for code linting and formatting
-- Follow CSS/SCSS linting rules defined in .stylelintrc.json
+- Follow CSS linting rules defined in biome.json (css section)
 - Use TypeScript for type safety
 - Keep bundle size in check by monitoring imports
 
@@ -104,7 +104,7 @@ globs: **/*.jsx,**/*.tsx
 ## Code Organization
 - Use proper file naming conventions which is kebab-case ie. ListItem -> `list-item.tsx`
 - Prefer one component per folder, but group related components together when necessary, and ensure there is only one component per file.
-- Component folders should have a SCSS `.module.scss` with the name of the component kebab-case ie. ListItem -> `list-item.module.scss`
+- Component folders should have a CSS `.module.css` with the name of the component kebab-case ie. ListItem -> `list-item.module.css`
 - Implement proper directory structure
 - UI components live within `web/libs/ui`
 - Application components that are shared across applications such as certain page-level blocks live within `web/libs/app-common`

.cursor/rules/tailwind.mdc

@@ -1,23 +1,23 @@
 ---
 description: Tailwind CSS and UI component best practices for the LabelStudio clientside application
-globs: **/*.css,tailwind.config.ts,tailwind.config.js,**/*.scss,**/*.tsx,**/*.jsx
+globs: **/*.css,tailwind.config.ts,tailwind.config.js,**/*.tsx,**/*.jsx
 ---
 
 # Tailwind CSS Best Practices
 
 ## Component Styling
 - Use utility classes over custom CSS
 - Group related utilities with @apply when needed
-- Use custom component styles as a SCSS module only when necessary to improve the readability and maintainability of the components
+- Use custom component styles as a CSS module only when necessary to improve the readability and maintainability of the components
 - Use proper responsive design utilities
 - Use proper state variants
 - Keep component styles consistent
 
 ## Tokens
-- All tokens from Figma are programatically generated and defined in the `web/libs/ui/src/tokens/tokens.scss` file
+- All tokens from Figma are programatically generated and defined in the `web/libs/ui/src/tokens/tokens.prefix.css` file
 - Tokens can be regenerated by exporting from Figma using the plugin `Figma Variable Exporter` and replacing the contents of `web/design-tokens.json` with the newly exported json file then using the `cd web/ && yarn design-tokens` command
 - When regenerating tokens, ensure that the project root level `make fmt-all` command is run to ensure all the files are linted and formatted properly
-- Do not use any of the tokens not defined through the Figma Variable Exporter plugin and established in the `web/libs/ui/src/tokens/tokens.scss` file
+- Do not use any of the tokens not defined through the Figma Variable Exporter plugin and established in the `web/libs/ui/src/tokens/tokens.prefix.css` file
 - Do not use any of the default tailwind css classes, only use the ones defined through the `web/libs/ui/src/tokens/tokens.js` file
 
 ## Layout

DESIGN.md

@@ -97,7 +97,7 @@ For domain terminology (Project, Task, Annotation, etc.), see `terminology.mdc`
 
 ## Design Tokens
 
-**Location**: `web/libs/ui/src/tokens/tokens.scss`
+**Location**: `web/libs/ui/src/tokens/tokens.prefix.css`
 
 **Always use semantic tokens** instead of numeric values:
 
@@ -118,27 +118,27 @@ For domain terminology (Project, Task, Annotation, etc.), see `terminology.mdc`
 - **Accent**: Decorative colors (grape, blueberry, kale, kiwi, mango, canteloupe, persimmon, plum, fig, sand)
 
 **Color Token Structure**:
-```scss
-// Surface colors (for backgrounds of interactive elements)
+```css
+/* Surface colors (for backgrounds of interactive elements) */
 --color-primary-surface
 --color-primary-surface-hover
 --color-primary-surface-active
 
-// Content colors (for text)
+/* Content colors (for text) */
 --color-neutral-content
 --color-neutral-content-subtle
 --color-neutral-content-subtler
---color-neutral-content-subtlest  // Use for disabled text
+--color-neutral-content-subtlest  /* Use for disabled text */
 
-// Background colors (for page/container backgrounds)
+/* Background colors (for page/container backgrounds) */
 --color-neutral-background
 --color-primary-background
 
-// Border colors
+/* Border colors */
 --color-neutral-border
 --color-primary-border-subtle
 
-// Icon colors
+/* Icon colors */
 --color-primary-icon
 --color-negative-icon
 ```
@@ -225,12 +225,12 @@ See `tailwind.mdc` for complete guidelines.
 
 **Responsive**: `sm:`, `md:`, `lg:` utilities
 
-### SCSS Modules
+### CSS Modules
 
-Co-locate `.module.scss` with components.
+Co-locate `.module.css` with components.
 
 **Component Tokens Pattern**:
-```scss
+```css
 .base {
   --background-color: var(--color-primary-surface);
   --text-color: var(--color-primary-surface-content);
@@ -244,7 +244,7 @@ Co-locate `.module.scss` with components.
 }
 ```
 
-**Tailwind in SCSS**: `@apply flex items-center gap-tight;`
+**Tailwind in CSS**: `@apply flex items-center gap-tight;`
 
 **Canvas Elements**:
 
@@ -265,7 +265,7 @@ See `react.mdc` for complete React patterns.
 
 - `@humansignal/ui` components: kebab-case (`button.tsx`, `empty-state.tsx`)
 - Application components: PascalCase acceptable (`DataManager.tsx`)
-- Co-locate: `.tsx`, `.module.scss`, `.stories.tsx`, `.test.tsx`
+- Co-locate: `.tsx`, `.module.css`, `.stories.tsx`, `.test.tsx`
 - Every component must have Storybook stories
 
 ---
@@ -338,7 +338,7 @@ Before creating new components, check `@humansignal/ui` and Storybook.
 Never hard-code values. Use semantic tokens: `text-primary-content p-tight text-body-medium`
 
 Create component tokens:
-```scss
+```css
 .component {
   --component-bg: var(--color-neutral-surface);
   background: var(--component-bg);
@@ -393,7 +393,7 @@ Exceptions: draft content, preferences, immediate toggles.
 ### Key Files
 
 - Components: `web/libs/ui/src/lib/`
-- Tokens: `web/libs/ui/src/tokens/tokens.scss`
+- Tokens: `web/libs/ui/src/tokens/tokens.prefix.css`
 - Icons: `@humansignal/icons`
 - Storybook: `yarn nx storybook storybook`
 

web/.stylelintignore

@@ -6,7 +6,7 @@ import "@cypress/code-coverage/support";
 // Output spec steps
 require("cypress-terminal-report/src/installLogsCollector")({
   filterLog: ([type, message]: [string, string]) => {
-    // Suppress noisy webpack-dev-server / Sass deprecation warnings
+    // Suppress noisy webpack-dev-server warnings
     if (type === "cons:warn" && typeof message === "string" && message.includes("[webpack-dev-server]")) {
       return false;
     }

web/libs/frontend-test/src/cypress/support/e2e.ts

@@ -40,13 +40,13 @@ This will automatically generate a scaffold of the following:
 
 1. Perform the same step to creating a component for the component in question, continuing with the theme we'll use `Button` as an example.
 
-2. Find all current definitions within the project that would require to be replaced, take the consolidated version of the existing component and place the current SCSS and TSX within the generated file equivalents from the previous step. (NOTE: Ensure to keep the new SCSS module styles import, replacing the old one that may have been copied over)
+2. Find all current definitions within the project that would require to be replaced, take the consolidated version of the existing component and place the current CSS and TSX within the generated file equivalents from the previous step. (NOTE: Ensure to keep the new CSS module styles import, replacing the old one that may have been copied over)
 
 3. Remove any `bem.tsx` imports
 
 4. Replace the BEM components used with standard jsx tags.
 
-5. Add the className's from the SCSS module styles object based on the same BEM structure previously found. (NOTE: Ensure that conditionals/modifiers are handled correctly)
+5. Add the className's from the CSS module styles object based on the same BEM structure previously found. (NOTE: Ensure that conditionals/modifiers are handled correctly)
 
 6. Add the component stories to the generated `button.stories.tsx` file.