refactor(eds-core-react): 🔧 Input - rename styles.css to index.css

- Rename src/styles.css to src/index.css for better naming convention
- Rename build outputs: styles.css → index.css, styles.min.css → index.min.css
- Update package.json exports to use index.css naming
- Update all import references in src/index.ts and .storybook/preview.mjs
- Update rollup.config.js to build index.css files
- Update CSS_ARCHITECTURE.md documentation
- Rebuild CSS files with new naming

Author: millus

packages/eds-core-react/.storybook/preview.mjs

@@ -1,5 +1,5 @@
 import './preview.css'
-import '../src/styles.css'
+import '../src/index.css'
 
 const preview = {
   viewMode: 'docs',

packages/eds-core-react/CSS_ARCHITECTURE.md

@@ -2,46 +2,46 @@
 
 ## Overview
 
-Component CSS is centralized in `src/styles.css` to prevent duplicate imports and enable automatic tree-shaking.
+Component CSS is centralized in `src/index.css` to prevent duplicate imports and enable automatic tree-shaking.
 
 ## Structure
 
 ```
 src/
-├── styles.css          # Imports all component CSS
-├── index.ts            # Imports styles.css once
+├── index.css           # Imports all component CSS
+├── index.ts            # Imports index.css once
 └── components/
     └── Input/
         ├── Input.new.tsx     # No CSS import
-        └── Input.new.css     # Styles defined here
+        └── input.new.css     # Styles defined here
 ```
 
 ## How It Works
 
 1. Component CSS files contain the styles
-2. `src/styles.css` imports all component CSS with `@import`
-3. `src/index.ts` imports `styles.css` once
+2. `src/index.css` imports all component CSS with `@import`
+3. `src/index.ts` imports `index.css` once
 4. Users get all CSS automatically when importing components
 
 ## Adding Components
 
 When creating a component with CSS:
 
-1. Create `Button.new.css` in component directory
-2. Add to `src/styles.css`:
+1. Create `button.new.css` in component directory
+2. Add to `src/index.css`:
    ```css
-   @import './components/Button/Button.new.css';
+   @import './components/Button/button.new.css';
    ```
 3. **Never** import CSS in `.tsx` files
 
 ## Build
 
 Rollup builds CSS with PostCSS to bundle all `@import` statements:
 
-- **Input**: `src/styles.css`
-- **Output**: 
-  - `build/styles.css` (3.5KB formatted)
-  - `build/styles.min.css` (2.1KB minified)
+- **Input**: `src/index.css`
+- **Output**:
+  - `build/index.css` (3.5KB formatted)
+  - `build/index.min.css` (2.1KB minified)
 
 ## Usage
 
@@ -54,18 +54,20 @@ import { InputNew } from '@equinor/eds-core-react'
 Or import CSS separately if needed:
 
 ```tsx
-import '@equinor/eds-core-react/styles.css'      // Development
-import '@equinor/eds-core-react/styles.min.css'  // Production
+import '@equinor/eds-core-react/index.css' // Development
+import '@equinor/eds-core-react/index.min.css' // Production
 ```
 
 ## Configuration
 
 **package.json**:
+
 - `"sideEffects": ["**/*.css"]` -- Preserves CSS during tree-shaking
 - `"files": ["dist/*", "build/*"]` -- Publishes JS and CSS
-- Exports CSS at `./styles.css` and `./styles.min.css`
+- Exports CSS at `./index.css` and `./index.min.css`
 
 **Storybook** (`.storybook/preview.mjs`):
+
 ```javascript
-import '../src/styles.css'  // Global component styles
+import '../src/index.css' // Global component styles
 ```

packages/eds-core-react/build/styles.css renamed to packages/eds-core-react/build/index.css

@@ -101,7 +101,7 @@
   }
 
   /* Force neutral colors for adornments even when parent has invalid state */
-  [data-color-appearance] .eds-adornment {
+  .eds-input[data-color-appearance] .eds-adornment {
     color: var(--eds-color-text-subtle);
   }
 

packages/eds-core-react/build/styles.min.css renamed to packages/eds-core-react/build/index.min.css

@@ -32,8 +32,8 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/eds-core-react.cjs"
     },
-    "./styles.css": "./build/styles.css",
-    "./styles.min.css": "./build/styles.min.css"
+    "./index.css": "./build/index.css",
+    "./index.min.css": "./build/index.min.css"
   },
   "scripts": {
     "build": "rollup -c && tsc -p tsconfig.build.json",

packages/eds-core-react/package.json

@@ -58,11 +58,11 @@ export default [
     ],
   },
   {
-    input: './src/styles.css',
+    input: './src/index.css',
     plugins: [
       postcss({
         extensions: ['.css'],
-        extract: 'styles.css',
+        extract: 'index.css',
         minimize: false,
         sourceMap: false,
         plugins: [postcssImport()],
@@ -74,11 +74,11 @@ export default [
     },
   },
   {
-    input: './src/styles.css',
+    input: './src/index.css',
     plugins: [
       postcss({
         extensions: ['.css'],
-        extract: 'styles.min.css',
+        extract: 'index.min.css',
         minimize: true,
         sourceMap: false,
         plugins: [postcssImport()],

packages/eds-core-react/rollup.config.js

@@ -10,7 +10,7 @@ import * as ComponentStories from './Input.new.stories'
 
 This component uses the **dynamic color approach** from `@equinor/eds-tokens`, allowing semantic context changes via the `data-color-appearance` attribute without modifying component code.
 
-Intended to use if you need more flexibility than the wrapped TextField or select components give.
+Intended to be used if you need more flexibility than the wrapped TextField or select components provide.
 
 <Links 
     ariaUrl="https://www.w3.org/TR/wai-aria-1.1/#input"

packages/eds-core-react/src/components/Input/Input.new.docs.mdx

@@ -224,7 +224,7 @@ export const WithAdornments: StoryFn<InputProps> = () => {
         rightAdornments={
           <>
             unit
-            <Icon data={anchor} size={18}></Icon>
+            <Icon data={anchor} size={18} />
           </>
         }
       />
@@ -244,7 +244,7 @@ export const WithAdornments: StoryFn<InputProps> = () => {
         rightAdornments={
           <>
             unit
-            <Icon data={anchor} size={18}></Icon>
+            <Icon data={anchor} size={18} />
           </>
         }
       />
@@ -267,7 +267,7 @@ export const WithAdornments: StoryFn<InputProps> = () => {
         rightAdornments={
           <>
             unit
-            <Icon data={anchor} size={18}></Icon>
+            <Icon data={anchor} size={18} />
           </>
         }
       />
@@ -287,7 +287,7 @@ export const WithAdornments: StoryFn<InputProps> = () => {
         rightAdornments={
           <>
             unit
-            <Icon data={anchor} size={18}></Icon>
+            <Icon data={anchor} size={18} />
           </>
         }
       />

packages/eds-core-react/src/components/Input/Input.new.stories.tsx

@@ -97,7 +97,7 @@
   }
 
   /* Force neutral colors for adornments even when parent has invalid state */
-  [data-color-appearance] .eds-adornment {
+  .eds-input[data-color-appearance] .eds-adornment {
     color: var(--eds-color-text-subtle);
   }