@equinor/roma-framework 5.0.0 → 6.0.0

package/dev-portal/lib/dev-portal/config/AppClient.d.ts

@@ -1,7 +1,12 @@
-import { AppBuildManifest, AppConfig, AppManifest, IAppClient } from '@equinor/fusion-framework-module-app';
+import { AppBuildManifest, AppConfig, AppManifest as FusionAppManifest, IAppClient } from '@equinor/fusion-framework-module-app';
 import { Observable } from 'rxjs';
 import { IHttpClient } from '@equinor/fusion-framework-module-http';
 import { FetchRequest } from '@equinor/fusion-framework-module-http/client';
+type AppManifest = FusionAppManifest & {
+    metadata?: {
+        assets?: Array<string>;
+    };
+};
 export declare class CustomAppClient implements IAppClient {
     #private;
     private client;
@@ -15,9 +20,9 @@ export declare class CustomAppClient implements IAppClient {
     }): Observable<AppManifest>;
     getAppManifests(): Observable<never[] | {
         hasAccess: boolean | undefined;
-        key: string;
+        key?: string;
         appKey: string;
-        name: string;
+        name?: string;
         displayName: string;
         description: string;
         type: "template" | "standalone" | "report" | "launcher" | "template-app" | "landing-page";
@@ -31,12 +36,12 @@ export declare class CustomAppClient implements IAppClient {
             defaultIcon: string;
             sortOrder: number;
         } & import('../../api/roma').CategoryDto) | undefined;
-        visualization?: {
+        visualization?: ({
             color?: string | null | undefined;
             icon?: string | null | undefined;
             sortOrder: number;
-        } | null | undefined;
-        keywords?: string[] | null | undefined;
+        } & import('../../api/roma').VisualizationDto) | undefined;
+        keywords?: string[] | undefined;
         admins?: {
             id: string;
             azureUniqueId: string;
@@ -57,20 +62,24 @@ export declare class CustomAppClient implements IAppClient {
             accountClassification?: string | null | undefined;
             isExpired?: boolean | null | undefined;
         }[] | null | undefined;
-        build?: AppBuildManifest | null | undefined;
-        accentColor?: string;
-        categoryId: string;
+        build?: (AppBuildManifest & import('../../api/roma').BuildDto) | undefined;
+        routes?: import('@equinor/fusion-framework-module-app').RouteSchemaEntry[] | null | undefined;
+        metadata?: {
+            assets?: Array<string>;
+        };
+        version: import('../../api/roma').VersionDto;
+        shortName: string;
         entry: string;
-        hide?: boolean;
-        icon?: string;
-        order?: number;
         publishedDate?: string;
-        shortName: string;
         tags?: string[];
-        version: import('../../api/roma').VersionDto;
-        config?: {
+        hide?: boolean;
+        order?: number;
+        accentColor?: string;
+        icon?: string;
+        categoryId: string;
+        config?: (import('../../api/roma').ConfigDto & {
             groups: Array<string>;
-        };
+        }) | undefined;
     }[]>;
     getAppSettings(): Observable<{}>;
     updateAppSettings(): Observable<{}>;
@@ -81,3 +90,4 @@ export declare class CustomAppClient implements IAppClient {
         tag?: string;
     }): Observable<AppBuildManifest>;
 }
+export {};

package/dev-portal/lib/style-provider.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 type Props = {
     scope: string;
     children: ReactNode;
+    version?: string;
 };
-export declare const StyleProvider: ({ scope, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const StyleProvider: ({ scope, children, version }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dev-portal/package.json

@@ -1,14 +1,50 @@
 {
   "name": "@equinor/roma-framework",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "repository": "https://github.com/equinor/tops-roma",
   "types": "./index.d.ts",
   "private": false,
+  "peerDependencies": {
+    "@equinor/eds-core-react": "^2.4.0",
+    "@equinor/eds-icons": "^1.3.0",
+    "@equinor/eds-tokens": "^2.2.0",
+    "@equinor/fusion-framework": "^8.0.0",
+    "@equinor/fusion-framework-app": "^11.0.0",
+    "@equinor/fusion-framework-module": "^6.0.0",
+    "@equinor/fusion-framework-module-app": "^8.0.0",
+    "@equinor/fusion-framework-module-context": "^8.0.0",
+    "@equinor/fusion-framework-module-http": "^8.0.0",
+    "@equinor/fusion-framework-module-msal": "^8.0.0",
+    "@equinor/fusion-framework-module-navigation": "^6.0.0",
+    "@equinor/fusion-framework-module-service-discovery": "^10.0.0",
+    "@equinor/fusion-framework-react": "^8.0.0",
+    "@equinor/fusion-framework-react-app": "^10.0.0",
+    "@equinor/fusion-framework-react-module": "^4.0.0",
+    "@equinor/fusion-framework-react-module-http": "^11.0.0",
+    "@equinor/fusion-framework-react-router": "^1.0.2",
+    "@equinor/roma-sse-module": "1.0.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.2",
+    "rxjs": "^7.8.2",
+    "styled-components": "^6.3.11"
+  },
   "dependencies": {
-    "@tanstack/react-query": "^5.0.0",
-    "immer": "^10.2.0",
+    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-query-devtools": "^5.91.3",
+    "@tanstack/react-query-persist-client": "^5.90.24",
+    "idb-keyval": "^6.2.2",
+    "immer": "^11.0.0",
+    "react-intl": "^10.1.0",
     "is-mergeable-object": "^1.1.1"
   },
+  "devDependencies": {
+    "@nx/vite": "22.5.4",
+    "@testing-library/react": "16.1.0",
+    "@vitejs/plugin-react": "^5.1.4",
+    "vite": "^7.3.2",
+    "vite-plugin-dts": "^4.5.4"
+  },
   "exports": {
     ".": {
       "import": "./roma-framework.mjs",
@@ -18,6 +54,7 @@
       "types": "./lib/test-utils/roma-cypress-wrapper.d.ts",
       "import": "./cypress.mjs",
       "require": "./cypress.js"
-    }
+    },
+    "./css-variables.css": "./src/css-variables.css"
   }
 }

package/dev-portal/roma-framework.css

@@ -0,0 +1,478 @@
+:root {
+  --eds_clickbound_jumbo__base: 88px;
+  --eds_clickbound_default__base: 48px;
+  --eds_clickbound_default__input: 56px;
+  --eds_clickbound_compact__standard: 32px;
+  --eds_clickbound_compact__input: 44px;
+
+  --eds_text_static_icons__default: rgba(61, 61, 61, 1);
+  --eds_text_static_icons__secondary: rgba(86, 86, 86, 1);
+  --eds_text_static_icons__tertiary: rgba(111, 111, 111, 1);
+  --eds_text_static_icons__primary_white: rgba(255, 255, 255, 1);
+  --eds_ui_background__default: rgba(255, 255, 255, 1);
+  --eds_ui_background__semitransparent: rgba(255, 255, 255, 0.2);
+  --eds_ui_background__light: rgba(247, 247, 247, 1);
+  --eds_ui_background__scrim: rgba(0, 0, 0, 0.4);
+  --eds_ui_background__overlay: rgba(0, 0, 0, 0.8);
+  --eds_ui_background__medium: rgba(220, 220, 220, 1);
+  --eds_ui_background__info: rgba(213, 234, 244, 1);
+  --eds_ui_background__warning: rgba(255, 231, 214, 1);
+  --eds_ui_background__danger: rgba(255, 193, 193, 1);
+  --eds_infographic_substitute__purple_berry: rgba(140, 17, 89, 1);
+  --eds_infographic_substitute__pink_rose: rgba(226, 73, 115, 1);
+  --eds_infographic_substitute__pink_salmon: rgba(255, 146, 168, 1);
+  --eds_infographic_substitute__green_cucumber: rgba(0, 95, 87, 1);
+  --eds_infographic_substitute__green_succulent: rgba(0, 151, 123, 1);
+  --eds_infographic_substitute__green_mint: rgba(64, 211, 143, 1);
+  --eds_infographic_substitute__blue_ocean: rgba(0, 64, 136, 1);
+  --eds_infographic_substitute__blue_overcast: rgba(0, 132, 196, 1);
+  --eds_infographic_substitute__blue_sky: rgba(82, 192, 255, 1);
+  --eds_infographic_primary__moss_green_100: rgba(0, 112, 121, 1);
+  --eds_infographic_primary__moss_green_55: rgba(115, 177, 181, 1);
+  --eds_infographic_primary__moss_green_34: rgba(168, 206, 209, 1);
+  --eds_infographic_primary__moss_green_21: rgba(201, 224, 226, 1);
+  --eds_infographic_primary__moss_green_13: rgba(222, 237, 238, 1);
+  --eds_infographic_primary__energy_red_100: rgba(235, 0, 55, 1);
+  --eds_infographic_primary__energy_red_55: rgba(255, 125, 152, 1);
+  --eds_infographic_primary__energy_red_34: rgba(255, 174, 191, 1);
+  --eds_infographic_primary__energy_red_21: rgba(255, 205, 215, 1);
+  --eds_infographic_primary__energy_red_13: rgba(255, 224, 231, 1);
+  --eds_infographic_primary__weathered_red: rgba(125, 0, 35, 1);
+  --eds_infographic_primary__slate_blue: rgba(36, 55, 70, 1);
+  --eds_infographic_primary__spruce_wood: rgba(255, 231, 214, 1);
+  --eds_infographic_primary__mist_blue: rgba(213, 234, 244, 1);
+  --eds_infographic_primary__lichen_green: rgba(230, 250, 236, 1);
+  --eds_logo_fill_positive: rgba(235, 0, 55, 1);
+  --eds_logo_fill_negative: rgba(255, 255, 255, 1);
+  --eds_interactive_primary__selected_highlight: rgba(230, 250, 236, 1);
+  --eds_interactive_primary__selected_hover: rgba(195, 243, 210, 1);
+  --eds_interactive_primary__resting: rgba(0, 112, 121, 1);
+  --eds_interactive_primary__hover: rgba(0, 79, 85, 1);
+  --eds_interactive_primary__hover_alt: rgba(222, 237, 238, 1);
+  --eds_interactive_secondary__highlight: rgba(213, 234, 244, 1);
+  --eds_interactive_secondary__resting: rgba(36, 55, 70, 1);
+  --eds_interactive_secondary__link_hover: rgba(23, 36, 47, 1);
+  --eds_interactive_danger__highlight: rgba(255, 193, 193, 1);
+  --eds_interactive_danger__resting: rgba(235, 0, 0, 1);
+  --eds_interactive_danger__hover: rgba(179, 13, 47, 1);
+  --eds_interactive_danger__text: rgba(179, 13, 47, 1);
+  --eds_interactive_warning__highlight: rgba(255, 231, 214, 1);
+  --eds_interactive_warning__resting: rgba(255, 146, 0, 1);
+  --eds_interactive_warning__hover: rgba(173, 98, 0, 1);
+  --eds_interactive_warning__text: rgba(173, 98, 0, 1);
+  --eds_interactive_success__highlight: rgba(230, 250, 236, 1);
+  --eds_interactive_success__resting: rgba(75, 183, 72, 1);
+  --eds_interactive_success__hover: rgba(53, 129, 50, 1);
+  --eds_interactive_success__text: rgba(53, 129, 50, 1);
+  --eds_interactive_table__cell__fill_resting: rgba(255, 255, 255, 1);
+  --eds_interactive_table__cell__fill_hover: rgba(234, 234, 234, 1);
+  --eds_interactive_table__cell__fill_activated: rgba(230, 250, 236, 1);
+  --eds_interactive_table__header__fill_activated: rgba(234, 234, 234, 1);
+  --eds_interactive_table__header__fill_hover: rgba(220, 220, 220, 1);
+  --eds_interactive_table__header__fill_resting: rgba(247, 247, 247, 1);
+  --eds_interactive_disabled__text: rgba(190, 190, 190, 1);
+  --eds_interactive_text_highlight: rgba(213, 234, 244, 1);
+  --eds_interactive_focus: rgba(0, 112, 121, 1);
+  --eds_interactive_disabled__border: rgba(220, 220, 220, 1);
+  --eds_interactive_disabled__fill: rgba(234, 234, 234, 1);
+  --eds_interactive_link_on_interactive_colors: rgba(255, 255, 255, 1);
+  --eds_interactive_icon_on_interactive_colors: rgba(255, 255, 255, 1);
+  --eds_interactive_link_in_snackbars: rgba(151, 202, 206, 1);
+  --eds_interactive_pressed_overlay_dark: rgba(0, 0, 0, 0.2);
+  --eds_interactive_pressed_overlay_light: rgba(255, 255, 255, 0.2);
+
+  --eds_elevation_raised: 0 1px 5px rgba(0, 0, 0, 0.2),0 3px 4px rgba(0, 0, 0, 0.12),0 2px 4px rgba(0, 0, 0, 0.14);
+  --eds_elevation_none: 0 0 1px rgba(0, 0, 0, 0.14);
+  --eds_elevation_overlay: 0 1px 10px rgba(0, 0, 0, 0.2),0 4px 5px rgba(0, 0, 0, 0.12),0 2px 4px rgba(0, 0, 0, 0.14);
+  --eds_elevation_sticky: 0 4px 5px rgba(0, 0, 0, 0.2),0 3px 14px rgba(0, 0, 0, 0.12),0 8px 10px rgba(0, 0, 0, 0.14);
+  --eds_elevation_temporary_nav: 0 7px 8px rgba(0, 0, 0, 0.2),0 5px 22px rgba(0, 0, 0, 0.12),0 12px 17px rgba(0, 0, 0, 0.14);
+  --eds_elevation_above_scrim: 0 11px 15px rgba(0, 0, 0, 0.2),0 9px 46px rgba(0, 0, 0, 0.12),0 24px 38px rgba(0, 0, 0, 0.14);
+
+
+  --eds_shape_toggle_straight_border_min_height: 36px;
+  --eds_shape_toggle_straight_border_min_width: 36px;
+
+  --eds_shape_toggle_rounded_border_min_height: 36px;
+  --eds_shape_toggle_rounded_border_min_width: 36px;
+
+  --eds_shape_circle_min_height: 40px;
+  --eds_shape_circle_min_width: 40px;
+  --eds_shape_circle_border_radius: 100px;
+
+  --eds_shape_rounded_min_height: 40px;
+  --eds_shape_rounded_min_width: 40px;
+  --eds_shape_rounded_border_radius: 100px;
+
+  --eds_shape_button_min_height: 36px;
+  --eds_shape_button_min_width: 36px;
+  --eds_shape_button_border_radius: 4px;
+
+  --eds_shape_toggle_min_height: 36px;
+  --eds_shape_toggle_min_width: 36px;
+  --eds_shape_toggle_border_radius: 4px;
+
+  --eds_shape_corners_min_height: 36px;
+  --eds_shape_corners_min_width: 36px;
+  --eds_shape_corners_border_radius: 4px;
+
+  --eds_shape_icon_button_min_height: 40px;
+  --eds_shape_icon_button_min_width: 40px;
+  --eds_shape_icon_button_border_radius: 100px;
+
+  --eds_shape_field_min_height: 56px;
+  --eds_shape_field_min_width: 56px;
+
+  --eds_shape_straight_min_height: 36px;
+  --eds_shape_straight_min_width: 36px;
+
+  --eds_shape_caret_min_height: 8px;
+  --eds_shape_caret_min_width: 8px;
+  font-size:16px;
+  font-family: Equinor;
+
+  --eds_spacing_xxx_large: 48px;
+  --eds_spacing_xx_large: 40px;
+  --eds_spacing_x_large: 32px;
+  --eds_spacing_large: 24px;
+  --eds_spacing_medium: 16px;
+  --eds_spacing_medium_small: 12px;
+  --eds_spacing_small: 8px;
+  --eds_spacing_x_small: 4px;
+  --eds_spacing_xx_small: 2px;
+
+}
+
+/**
+ * EDS (Equinor Design System) Theme for @toolbox-web/grid
+ *
+ * This theme uses CSS custom properties to style the toolbox grid
+ * to match the visual appearance of @equinor/eds-data-grid-react.
+ *
+ * Uses official EDS CSS variables when available (--eds_*) with fallbacks.
+ *
+ * Reference: https://eds.equinor.com/
+ * Toolbox Grid Theming: https://toolboxjs.com/?path=/docs/grid-theming--docs
+ *
+ * Requires @toolbox-web/grid v1.3.1+ for full CSS variable support.
+ */
+
+/**
+ * EDS Theme for Toolbox Grid
+ * Override the grid's CSS variables to match EDS design tokens
+ *
+ * NOTE: As of v1.3.1, the grid copies theme classes (like .eds-theme) to
+ * filter panels rendered in document.body, so these variables cascade properly.
+ */
+
+:root {
+  /* toolboxjs grid variables */
+
+  /* ========== Typography ========== */
+  --tbw-font-family: Equinor, sans-serif;
+  --tbw-font-size: 0.875rem; /* 14px */
+  --tbw-font-size-header: 0.875rem;
+  --tbw-font-weight-header: 700;
+
+  /* ========== Core Colors ========== */
+  --tbw-color-bg: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
+  --tbw-color-fg: var(--eds_text_static_icons__default, rgba(61, 61, 61, 1));
+  --tbw-color-fg-muted: var(--eds_text_static_icons__tertiary, rgba(111, 111, 111, 1));
+  --tbw-color-panel-bg: var(--eds_ui_background__light, rgba(247, 247, 247, 1));
+
+  /* ========== Borders ========== */
+  --tbw-color-border: var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+  --tbw-color-border-strong: var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+  --tbw-row-divider: 1px solid var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+  --tbw-color-border-cell: transparent;
+  --tbw-color-border-header: var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+  --tbw-border-radius: var(--eds_shape_button_border_radius, 4px);
+  --tbw-selection-border-style: dashed;
+  --tbw-selection-border-width: 1px;
+
+  /* ========== Header ========== */
+  --tbw-color-header-bg: var(--eds_interactive_table__header__fill_resting, rgba(247, 247, 247, 1));
+  --tbw-color-header-fg: var(--eds_text_static_icons__default, rgba(61, 61, 61, 1));
+  --tbw-header-text-transform: none;
+  --tbw-header-letter-spacing: normal;
+
+  /* ========== Row & Cell States ========== */
+  --tbw-color-row-alt: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
+  --tbw-color-row-hover: var(--eds_interactive_table__cell__fill_hover, rgba(234, 234, 234, 1));
+  --tbw-color-selection: var(--eds_interactive_primary__selected_highlight, rgba(230, 250, 236, 1));
+  --tbw-color-active-row-bg: var(--eds_interactive_table__cell__fill_activated, rgba(230, 250, 236, 1));
+  --tbw-editing-row-outline-width: 1px;
+
+  /* ========== Interactive/Accent ========== */
+  --tbw-color-accent: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));
+  --tbw-color-accent-fg: var(--eds_text_static_icons__primary_white, rgba(255, 255, 255, 1));
+
+  /* ========== Dimensions ========== */
+  --tbw-row-height: var(--eds_clickbound_default__base, 38px);
+  --tbw-header-height: var(--eds_clickbound_default__base, 38px);
+  --tbw-cell-padding: 0 var(--eds_spacing_medium, 8px);
+  --tbw-cell-padding-header: 0 var(--eds_spacing_medium, 8px);
+  --tbw-button-padding: 0.375rem 0.625rem;
+
+  /* ========== Focus Styling ========== */
+  --tbw-focus-outline: 0.5px dotted var(--eds_interactive_focus, rgba(0, 112, 121, 1));
+  --tbw-focus-outline-offset: -1px;
+
+  /* ========== Resize Handle ========== */
+  --tbw-resize-handle-color: transparent;
+  --tbw-resize-handle-color-hover: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));
+
+  /* ========== Sort Indicator ========== */
+  --tbw-sort-indicator-color: var(--eds_text_static_icons__tertiary, rgba(111, 111, 111, 1));
+  --tbw-sort-indicator-active-color: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));
+  /* ========== Display Control (v1.5.0+) ========== */
+  /* Hide filter button and sort indicator by default, show on hover/active */
+  --tbw-filter-btn-display: none;
+  --tbw-sort-indicator-display: none;
+
+  /* ========== Shadows ========== */
+  --tbw-color-shadow: rgba(0, 0, 0, 0.1);
+
+  /* ========== Filter Panel (renders outside tbw-grid, needs :root) ========== */
+  --tbw-filter-panel-bg: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
+  --tbw-filter-panel-fg: var(--eds_text_static_icons__default, rgba(61, 61, 61, 1));
+  --tbw-filter-panel-border: var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+  --tbw-filter-panel-radius: var(--eds_shape_button_border_radius, 4px);
+  --tbw-filter-panel-shadow: rgba(0, 0, 0, 0.15);
+  --tbw-filter-input-bg: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
+  --tbw-filter-input-border: var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+  --tbw-filter-input-radius: var(--eds_shape_button_border_radius, 4px);
+  --tbw-filter-input-focus: var(--eds_interactive_focus, rgba(0, 112, 121, 1));
+  --tbw-filter-accent: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));
+  --tbw-filter-accent-fg: var(--eds_text_static_icons__primary_white, rgba(255, 255, 255, 1));
+  --tbw-filter-hover: var(--eds_ui_background__light, rgba(247, 247, 247, 1));
+  --tbw-filter-muted: var(--eds_text_static_icons__tertiary, rgba(111, 111, 111, 1));
+  --tbw-filter-divider: var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+  --tbw-filter-active-color: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));
+
+  /* ========== Filter Button Styling (v1.3.1+) ========== */
+  --tbw-filter-btn-padding: 8px 16px;
+  --tbw-filter-btn-font-weight: 500;
+  --tbw-filter-btn-min-height: var(--eds_clickbound_default__base, 48px);
+  --tbw-filter-search-padding: 6px 8px;
+  --tbw-filter-item-height: 36px; /* Virtualization height - matches EDS touch target */
+
+  /* ========== Panel Layout ========== */
+  --tbw-panel-padding: var(--eds_spacing_medium_small, 12px);
+  --tbw-panel-gap: var(--eds_spacing_small, 8px);
+  --tbw-animation-duration: 150ms;
+
+
+  /* ========== Context Menu ========== */
+  --tbw-context-menu-bg: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
+  --tbw-context-menu-fg: var(--eds_text_static_icons__default, rgba(61, 61, 61, 1));
+  --tbw-context-menu-border: var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+  --tbw-context-menu-hover: var(--eds_interactive_table__cell__fill_hover, rgba(234, 234, 234, 1));
+  --tbw-context-menu-danger: var(--eds_interactive_danger__resting, rgba(235, 0, 0, 1));
+  --tbw-context-menu-muted: var(--eds_text_static_icons__tertiary, rgba(111, 111, 111, 1));
+  --tbw-context-menu-font-size: 0.873rem;
+  --tbw-context-menu-font-family: Equinor, sans-serif;
+  --tbw-context-menu-icon-size: 1.2rem;
+  --tbw-context-menu-item-padding: 8px 16px;
+  --tbw-context-menu-item-gap: 8px;
+  --tbw-context-menu-radius: var(--eds_shape_button_border_radius, 4px);
+  --tbw-context-menu-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+
+}
+
+/*
+  Everything below here is to apply baseline CSS to tbw-grid.
+  Some of these will be revisited in the future to give more flexibility to app-teams (or based on new EDS tokens)
+*/
+
+.tbw-context-menu {
+  .tbw-context-menu-shortcut kbd {
+    background: var(--eds_ui_background__light, rgba(247, 247, 247, 1));
+    border: 1px solid var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+    border-radius: 4px;
+    padding: 2px 6px;
+    font-family: 'Equinor Mono', 'Consolas', 'Courier New', monospace;
+    font-size: 0.75rem;
+    line-height: 1.4;
+  }
+}
+
+/**
+ * EDS Compact Mode
+ * Apply with: <tbw-grid class="eds-theme eds-compact">
+ */
+
+tbw-grid.eds-compact,
+.eds-compact tbw-grid {
+  --tbw-row-height: 21px;
+  --tbw-header-height: 23px;
+}
+
+/**
+ * Additional styling that can't be done with variables alone
+ */
+
+/* Toolbar content slot alignment */
+
+tbw-grid .tbw-toolbar-content-slot {
+  display: flex;
+  place-items: center;
+}
+
+/** For numeric cells, header and data should be right aligned */
+
+tbw-grid .cell[data-type='number'] {
+  text-align: right;
+}
+
+tbw-grid [part='cell'],
+tbw-grid [part='cell'],
+tbw-grid .data-grid-row .cell,
+tbw-grid .data-grid-row .cell {
+  font-weight: 500; /* Match EDS medium weight for body cells */
+  height: var(--tbw-row-height); /* toolbox grid only sets min-height */
+
+  /* When cell is in edit mode */
+  &.editing {
+    padding: 2px 1px;
+    position: relative;
+  }
+
+  /* Editor host container - provides visual boundary for all editor types */
+  & .tbw-editor-host {
+    border: 1px solid var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+    background: white;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: var(--tbw-cell-padding, 0 6px);
+    &:focus-within {
+      box-shadow: inset 0 -2px 0 0 var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));
+      outline: none;
+    }
+
+    /* Simple inputs (not wrapped in mat-form-field) */
+    & > input[type='text'],
+    & > input[type='number'] {
+      border: none;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+      padding: 0 4px;
+      outline: none;
+      width: 100%;
+      height: 100%;
+    }
+
+    /* Native select element (built-in select editor) */
+    & > select {
+      border: none;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+      padding: 0 4px;
+      outline: none;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+    }
+  }
+  &.cell-focus {
+    background: rgba(from var(--tbw-color-accent) r g b / 8%);
+  }
+}
+
+/**
+ * EDS Underline Input Style for Filter Panel Inputs
+ * Applies to search, range, and date inputs within filter panels
+ */
+
+.tbw-filter-panel {
+  max-width: none;
+  max-height: none;
+  /* EDS underline input style - requires direct CSS (no variables available for box-shadow/height) */
+  & .tbw-filter-search-input,
+  & .tbw-filter-range-input,
+  & .tbw-filter-date-input {
+    height: var(--tbw-row-height);
+    border: none;
+    border-radius: 0;
+    box-shadow: inset 0px -1px 0px 0px var(--eds_text__static_icons__tertiary, rgba(111, 111, 111, 1));
+    background: var(--eds_ui_background__light, rgba(247, 247, 247, 1));
+    outline: 1px solid transparent;
+    outline-offset: 0px;
+  }
+}
+
+/*
+ * Header font-weight and letter-spacing are now handled by CSS variables:
+ * --tbw-font-weight-header: 700
+ * --tbw-header-letter-spacing: normal
+ * (Defined in the :root block above)
+ */
+
+/**
+ * Default Toolbox Filter Panel - EDS Overrides
+ *
+ * Most styling is now handled by CSS variables (v1.3.1+):
+ * - --tbw-filter-btn-padding: 8px 16px
+ * - --tbw-filter-btn-font-weight: 500
+ * - --tbw-filter-btn-min-height: 48px
+ * - --tbw-filter-search-padding: 6px 8px
+ * - --tbw-filter-item-height: 36px
+ *
+ * Below are additional EDS-specific input styling tweaks.
+ */
+
+.tbw-filter-search-input,
+.tbw-filter-panel .tbw-filter-search-input {
+  font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: 0.025em;
+  line-height: 1.5em;
+  min-height: 36px;
+  box-sizing: border-box;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  background: var(--eds_ui_background__light, rgba(247, 247, 247, 1));
+}
+
+/**
+ * Angular Material Editor Theming
+ *
+ * Strip Material styling from editors inside the grid.
+ * The .tbw-editor-host provides the visual container (border + background),
+ * so Material components inside should be transparent/minimal.
+ */
+
+tbw-grid {
+  --mat-checkbox-state-layer-size: 20px;
+  /* Make form fields transparent - container provides styling */
+  --mdc-filled-text-field-container-color: transparent;
+  --mdc-filled-text-field-active-indicator-color: transparent;
+  --mdc-filled-text-field-hover-active-indicator-color: transparent;
+  --mdc-filled-text-field-focus-active-indicator-color: transparent;
+
+  /* Outlined variant - also transparent */
+  --mdc-outlined-text-field-outline-color: transparent;
+  --mdc-outlined-text-field-focus-outline-color: transparent;
+  --mdc-outlined-text-field-hover-outline-color: transparent;
+
+  & .mat-mdc-icon-button.mat-mdc-button-base {
+    --mdc-icon-button-state-layer-size: 28px;
+    --mat-icon-button-state-layer-size: 28px;
+  }
+
+  /* Strip mat-form-field completely inside editors */
+  & .tbw-editor-host {
+    /* Checkbox centering */
+    & .editor-checkbox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+  }
+}