@equinor/roma-framework 6.0.1-beta.0 → 6.0.1-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dev-portal/index.html +2 -1
- package/dev-portal/lib/style-provider.d.ts +2 -1
- package/dev-portal/package.json +7 -6
- package/dev-portal/roma-framework.css +478 -0
- package/dev-portal/roma-framework.umd.js +266 -315
- package/lib/style-provider.d.ts +2 -1
- package/package.json +7 -6
- package/roma-framework.mjs +4 -3
package/dev-portal/index.html
CHANGED
|
@@ -25,12 +25,13 @@
|
|
|
25
25
|
margin: 0;
|
|
26
26
|
}
|
|
27
27
|
</style>
|
|
28
|
-
<link rel="stylesheet" href="https://cdn.eds.equinor.com/font/equinor-font.css">
|
|
29
28
|
<link rel="stylesheet" href="https://cdn.eds.equinor.com/font/equinor-mono.css">
|
|
29
|
+
<link rel="stylesheet" href="https://cdn.eds.equinor.com/font/eds-uprights-vf.css" />
|
|
30
30
|
|
|
31
31
|
<meta name='viewport' content='width=device-width, initial-scale=1'/>
|
|
32
32
|
<link rel='icon' type='image/x-icon' href='/favicon.ico'/>
|
|
33
33
|
<script type="module" crossorigin src="/roma-framework.umd.js"></script>
|
|
34
|
+
<link rel="stylesheet" crossorigin href="/roma-framework.css">
|
|
34
35
|
</head>
|
|
35
36
|
<body>
|
|
36
37
|
<div id='root'></div>
|
|
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
|
|
|
2
2
|
type Props = {
|
|
3
3
|
scope: string;
|
|
4
4
|
children: ReactNode;
|
|
5
|
+
version?: string;
|
|
5
6
|
};
|
|
6
|
-
export declare const StyleProvider: ({ scope, children }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare const StyleProvider: ({ scope, children, version }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
7
8
|
export {};
|
package/dev-portal/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@equinor/roma-framework",
|
|
3
|
-
"version": "6.0.1-beta.
|
|
3
|
+
"version": "6.0.1-beta.3",
|
|
4
4
|
"repository": "https://github.com/equinor/tops-roma",
|
|
5
5
|
"types": "./index.d.ts",
|
|
6
6
|
"private": false,
|
|
7
7
|
"peerDependencies": {
|
|
8
|
-
"@equinor/eds-core-react": "^
|
|
9
|
-
"@equinor/eds-icons": "^
|
|
10
|
-
"@equinor/eds-tokens": "^
|
|
8
|
+
"@equinor/eds-core-react": "^2.4.0",
|
|
9
|
+
"@equinor/eds-icons": "^1.3.0",
|
|
10
|
+
"@equinor/eds-tokens": "^2.2.0",
|
|
11
11
|
"@equinor/fusion-framework": "^8.0.0",
|
|
12
12
|
"@equinor/fusion-framework-app": "^11.0.0",
|
|
13
13
|
"@equinor/fusion-framework-module": "^6.0.0",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@nx/vite": "22.5.4",
|
|
43
43
|
"@testing-library/react": "16.1.0",
|
|
44
44
|
"@vitejs/plugin-react": "^5.1.4",
|
|
45
|
-
"vite": "^7.3.
|
|
45
|
+
"vite": "^7.3.2",
|
|
46
46
|
"vite-plugin-dts": "^4.5.4"
|
|
47
47
|
},
|
|
48
48
|
"exports": {
|
|
@@ -54,6 +54,7 @@
|
|
|
54
54
|
"types": "./lib/test-utils/roma-cypress-wrapper.d.ts",
|
|
55
55
|
"import": "./cypress.mjs",
|
|
56
56
|
"require": "./cypress.js"
|
|
57
|
-
}
|
|
57
|
+
},
|
|
58
|
+
"./css-variables.css": "./src/css-variables.css"
|
|
58
59
|
}
|
|
59
60
|
}
|
|
@@ -0,0 +1,478 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--eds_clickbound_jumbo__base: 88px;
|
|
3
|
+
--eds_clickbound_default__base: 48px;
|
|
4
|
+
--eds_clickbound_default__input: 56px;
|
|
5
|
+
--eds_clickbound_compact__standard: 32px;
|
|
6
|
+
--eds_clickbound_compact__input: 44px;
|
|
7
|
+
|
|
8
|
+
--eds_text_static_icons__default: rgba(61, 61, 61, 1);
|
|
9
|
+
--eds_text_static_icons__secondary: rgba(86, 86, 86, 1);
|
|
10
|
+
--eds_text_static_icons__tertiary: rgba(111, 111, 111, 1);
|
|
11
|
+
--eds_text_static_icons__primary_white: rgba(255, 255, 255, 1);
|
|
12
|
+
--eds_ui_background__default: rgba(255, 255, 255, 1);
|
|
13
|
+
--eds_ui_background__semitransparent: rgba(255, 255, 255, 0.2);
|
|
14
|
+
--eds_ui_background__light: rgba(247, 247, 247, 1);
|
|
15
|
+
--eds_ui_background__scrim: rgba(0, 0, 0, 0.4);
|
|
16
|
+
--eds_ui_background__overlay: rgba(0, 0, 0, 0.8);
|
|
17
|
+
--eds_ui_background__medium: rgba(220, 220, 220, 1);
|
|
18
|
+
--eds_ui_background__info: rgba(213, 234, 244, 1);
|
|
19
|
+
--eds_ui_background__warning: rgba(255, 231, 214, 1);
|
|
20
|
+
--eds_ui_background__danger: rgba(255, 193, 193, 1);
|
|
21
|
+
--eds_infographic_substitute__purple_berry: rgba(140, 17, 89, 1);
|
|
22
|
+
--eds_infographic_substitute__pink_rose: rgba(226, 73, 115, 1);
|
|
23
|
+
--eds_infographic_substitute__pink_salmon: rgba(255, 146, 168, 1);
|
|
24
|
+
--eds_infographic_substitute__green_cucumber: rgba(0, 95, 87, 1);
|
|
25
|
+
--eds_infographic_substitute__green_succulent: rgba(0, 151, 123, 1);
|
|
26
|
+
--eds_infographic_substitute__green_mint: rgba(64, 211, 143, 1);
|
|
27
|
+
--eds_infographic_substitute__blue_ocean: rgba(0, 64, 136, 1);
|
|
28
|
+
--eds_infographic_substitute__blue_overcast: rgba(0, 132, 196, 1);
|
|
29
|
+
--eds_infographic_substitute__blue_sky: rgba(82, 192, 255, 1);
|
|
30
|
+
--eds_infographic_primary__moss_green_100: rgba(0, 112, 121, 1);
|
|
31
|
+
--eds_infographic_primary__moss_green_55: rgba(115, 177, 181, 1);
|
|
32
|
+
--eds_infographic_primary__moss_green_34: rgba(168, 206, 209, 1);
|
|
33
|
+
--eds_infographic_primary__moss_green_21: rgba(201, 224, 226, 1);
|
|
34
|
+
--eds_infographic_primary__moss_green_13: rgba(222, 237, 238, 1);
|
|
35
|
+
--eds_infographic_primary__energy_red_100: rgba(235, 0, 55, 1);
|
|
36
|
+
--eds_infographic_primary__energy_red_55: rgba(255, 125, 152, 1);
|
|
37
|
+
--eds_infographic_primary__energy_red_34: rgba(255, 174, 191, 1);
|
|
38
|
+
--eds_infographic_primary__energy_red_21: rgba(255, 205, 215, 1);
|
|
39
|
+
--eds_infographic_primary__energy_red_13: rgba(255, 224, 231, 1);
|
|
40
|
+
--eds_infographic_primary__weathered_red: rgba(125, 0, 35, 1);
|
|
41
|
+
--eds_infographic_primary__slate_blue: rgba(36, 55, 70, 1);
|
|
42
|
+
--eds_infographic_primary__spruce_wood: rgba(255, 231, 214, 1);
|
|
43
|
+
--eds_infographic_primary__mist_blue: rgba(213, 234, 244, 1);
|
|
44
|
+
--eds_infographic_primary__lichen_green: rgba(230, 250, 236, 1);
|
|
45
|
+
--eds_logo_fill_positive: rgba(235, 0, 55, 1);
|
|
46
|
+
--eds_logo_fill_negative: rgba(255, 255, 255, 1);
|
|
47
|
+
--eds_interactive_primary__selected_highlight: rgba(230, 250, 236, 1);
|
|
48
|
+
--eds_interactive_primary__selected_hover: rgba(195, 243, 210, 1);
|
|
49
|
+
--eds_interactive_primary__resting: rgba(0, 112, 121, 1);
|
|
50
|
+
--eds_interactive_primary__hover: rgba(0, 79, 85, 1);
|
|
51
|
+
--eds_interactive_primary__hover_alt: rgba(222, 237, 238, 1);
|
|
52
|
+
--eds_interactive_secondary__highlight: rgba(213, 234, 244, 1);
|
|
53
|
+
--eds_interactive_secondary__resting: rgba(36, 55, 70, 1);
|
|
54
|
+
--eds_interactive_secondary__link_hover: rgba(23, 36, 47, 1);
|
|
55
|
+
--eds_interactive_danger__highlight: rgba(255, 193, 193, 1);
|
|
56
|
+
--eds_interactive_danger__resting: rgba(235, 0, 0, 1);
|
|
57
|
+
--eds_interactive_danger__hover: rgba(179, 13, 47, 1);
|
|
58
|
+
--eds_interactive_danger__text: rgba(179, 13, 47, 1);
|
|
59
|
+
--eds_interactive_warning__highlight: rgba(255, 231, 214, 1);
|
|
60
|
+
--eds_interactive_warning__resting: rgba(255, 146, 0, 1);
|
|
61
|
+
--eds_interactive_warning__hover: rgba(173, 98, 0, 1);
|
|
62
|
+
--eds_interactive_warning__text: rgba(173, 98, 0, 1);
|
|
63
|
+
--eds_interactive_success__highlight: rgba(230, 250, 236, 1);
|
|
64
|
+
--eds_interactive_success__resting: rgba(75, 183, 72, 1);
|
|
65
|
+
--eds_interactive_success__hover: rgba(53, 129, 50, 1);
|
|
66
|
+
--eds_interactive_success__text: rgba(53, 129, 50, 1);
|
|
67
|
+
--eds_interactive_table__cell__fill_resting: rgba(255, 255, 255, 1);
|
|
68
|
+
--eds_interactive_table__cell__fill_hover: rgba(234, 234, 234, 1);
|
|
69
|
+
--eds_interactive_table__cell__fill_activated: rgba(230, 250, 236, 1);
|
|
70
|
+
--eds_interactive_table__header__fill_activated: rgba(234, 234, 234, 1);
|
|
71
|
+
--eds_interactive_table__header__fill_hover: rgba(220, 220, 220, 1);
|
|
72
|
+
--eds_interactive_table__header__fill_resting: rgba(247, 247, 247, 1);
|
|
73
|
+
--eds_interactive_disabled__text: rgba(190, 190, 190, 1);
|
|
74
|
+
--eds_interactive_text_highlight: rgba(213, 234, 244, 1);
|
|
75
|
+
--eds_interactive_focus: rgba(0, 112, 121, 1);
|
|
76
|
+
--eds_interactive_disabled__border: rgba(220, 220, 220, 1);
|
|
77
|
+
--eds_interactive_disabled__fill: rgba(234, 234, 234, 1);
|
|
78
|
+
--eds_interactive_link_on_interactive_colors: rgba(255, 255, 255, 1);
|
|
79
|
+
--eds_interactive_icon_on_interactive_colors: rgba(255, 255, 255, 1);
|
|
80
|
+
--eds_interactive_link_in_snackbars: rgba(151, 202, 206, 1);
|
|
81
|
+
--eds_interactive_pressed_overlay_dark: rgba(0, 0, 0, 0.2);
|
|
82
|
+
--eds_interactive_pressed_overlay_light: rgba(255, 255, 255, 0.2);
|
|
83
|
+
|
|
84
|
+
--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);
|
|
85
|
+
--eds_elevation_none: 0 0 1px rgba(0, 0, 0, 0.14);
|
|
86
|
+
--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);
|
|
87
|
+
--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);
|
|
88
|
+
--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);
|
|
89
|
+
--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);
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
--eds_shape_toggle_straight_border_min_height: 36px;
|
|
93
|
+
--eds_shape_toggle_straight_border_min_width: 36px;
|
|
94
|
+
|
|
95
|
+
--eds_shape_toggle_rounded_border_min_height: 36px;
|
|
96
|
+
--eds_shape_toggle_rounded_border_min_width: 36px;
|
|
97
|
+
|
|
98
|
+
--eds_shape_circle_min_height: 40px;
|
|
99
|
+
--eds_shape_circle_min_width: 40px;
|
|
100
|
+
--eds_shape_circle_border_radius: 100px;
|
|
101
|
+
|
|
102
|
+
--eds_shape_rounded_min_height: 40px;
|
|
103
|
+
--eds_shape_rounded_min_width: 40px;
|
|
104
|
+
--eds_shape_rounded_border_radius: 100px;
|
|
105
|
+
|
|
106
|
+
--eds_shape_button_min_height: 36px;
|
|
107
|
+
--eds_shape_button_min_width: 36px;
|
|
108
|
+
--eds_shape_button_border_radius: 4px;
|
|
109
|
+
|
|
110
|
+
--eds_shape_toggle_min_height: 36px;
|
|
111
|
+
--eds_shape_toggle_min_width: 36px;
|
|
112
|
+
--eds_shape_toggle_border_radius: 4px;
|
|
113
|
+
|
|
114
|
+
--eds_shape_corners_min_height: 36px;
|
|
115
|
+
--eds_shape_corners_min_width: 36px;
|
|
116
|
+
--eds_shape_corners_border_radius: 4px;
|
|
117
|
+
|
|
118
|
+
--eds_shape_icon_button_min_height: 40px;
|
|
119
|
+
--eds_shape_icon_button_min_width: 40px;
|
|
120
|
+
--eds_shape_icon_button_border_radius: 100px;
|
|
121
|
+
|
|
122
|
+
--eds_shape_field_min_height: 56px;
|
|
123
|
+
--eds_shape_field_min_width: 56px;
|
|
124
|
+
|
|
125
|
+
--eds_shape_straight_min_height: 36px;
|
|
126
|
+
--eds_shape_straight_min_width: 36px;
|
|
127
|
+
|
|
128
|
+
--eds_shape_caret_min_height: 8px;
|
|
129
|
+
--eds_shape_caret_min_width: 8px;
|
|
130
|
+
font-size:16px;
|
|
131
|
+
font-family: Equinor;
|
|
132
|
+
|
|
133
|
+
--eds_spacing_xxx_large: 48px;
|
|
134
|
+
--eds_spacing_xx_large: 40px;
|
|
135
|
+
--eds_spacing_x_large: 32px;
|
|
136
|
+
--eds_spacing_large: 24px;
|
|
137
|
+
--eds_spacing_medium: 16px;
|
|
138
|
+
--eds_spacing_medium_small: 12px;
|
|
139
|
+
--eds_spacing_small: 8px;
|
|
140
|
+
--eds_spacing_x_small: 4px;
|
|
141
|
+
--eds_spacing_xx_small: 2px;
|
|
142
|
+
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/**
|
|
146
|
+
* EDS (Equinor Design System) Theme for @toolbox-web/grid
|
|
147
|
+
*
|
|
148
|
+
* This theme uses CSS custom properties to style the toolbox grid
|
|
149
|
+
* to match the visual appearance of @equinor/eds-data-grid-react.
|
|
150
|
+
*
|
|
151
|
+
* Uses official EDS CSS variables when available (--eds_*) with fallbacks.
|
|
152
|
+
*
|
|
153
|
+
* Reference: https://eds.equinor.com/
|
|
154
|
+
* Toolbox Grid Theming: https://toolboxjs.com/?path=/docs/grid-theming--docs
|
|
155
|
+
*
|
|
156
|
+
* Requires @toolbox-web/grid v1.3.1+ for full CSS variable support.
|
|
157
|
+
*/
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* EDS Theme for Toolbox Grid
|
|
161
|
+
* Override the grid's CSS variables to match EDS design tokens
|
|
162
|
+
*
|
|
163
|
+
* NOTE: As of v1.3.1, the grid copies theme classes (like .eds-theme) to
|
|
164
|
+
* filter panels rendered in document.body, so these variables cascade properly.
|
|
165
|
+
*/
|
|
166
|
+
|
|
167
|
+
:root {
|
|
168
|
+
/* toolboxjs grid variables */
|
|
169
|
+
|
|
170
|
+
/* ========== Typography ========== */
|
|
171
|
+
--tbw-font-family: Equinor, sans-serif;
|
|
172
|
+
--tbw-font-size: 0.875rem; /* 14px */
|
|
173
|
+
--tbw-font-size-header: 0.875rem;
|
|
174
|
+
--tbw-font-weight-header: 700;
|
|
175
|
+
|
|
176
|
+
/* ========== Core Colors ========== */
|
|
177
|
+
--tbw-color-bg: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
|
|
178
|
+
--tbw-color-fg: var(--eds_text_static_icons__default, rgba(61, 61, 61, 1));
|
|
179
|
+
--tbw-color-fg-muted: var(--eds_text_static_icons__tertiary, rgba(111, 111, 111, 1));
|
|
180
|
+
--tbw-color-panel-bg: var(--eds_ui_background__light, rgba(247, 247, 247, 1));
|
|
181
|
+
|
|
182
|
+
/* ========== Borders ========== */
|
|
183
|
+
--tbw-color-border: var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
|
|
184
|
+
--tbw-color-border-strong: var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
|
|
185
|
+
--tbw-row-divider: 1px solid var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
|
|
186
|
+
--tbw-color-border-cell: transparent;
|
|
187
|
+
--tbw-color-border-header: var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
|
|
188
|
+
--tbw-border-radius: var(--eds_shape_button_border_radius, 4px);
|
|
189
|
+
--tbw-selection-border-style: dashed;
|
|
190
|
+
--tbw-selection-border-width: 1px;
|
|
191
|
+
|
|
192
|
+
/* ========== Header ========== */
|
|
193
|
+
--tbw-color-header-bg: var(--eds_interactive_table__header__fill_resting, rgba(247, 247, 247, 1));
|
|
194
|
+
--tbw-color-header-fg: var(--eds_text_static_icons__default, rgba(61, 61, 61, 1));
|
|
195
|
+
--tbw-header-text-transform: none;
|
|
196
|
+
--tbw-header-letter-spacing: normal;
|
|
197
|
+
|
|
198
|
+
/* ========== Row & Cell States ========== */
|
|
199
|
+
--tbw-color-row-alt: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
|
|
200
|
+
--tbw-color-row-hover: var(--eds_interactive_table__cell__fill_hover, rgba(234, 234, 234, 1));
|
|
201
|
+
--tbw-color-selection: var(--eds_interactive_primary__selected_highlight, rgba(230, 250, 236, 1));
|
|
202
|
+
--tbw-color-active-row-bg: var(--eds_interactive_table__cell__fill_activated, rgba(230, 250, 236, 1));
|
|
203
|
+
--tbw-editing-row-outline-width: 1px;
|
|
204
|
+
|
|
205
|
+
/* ========== Interactive/Accent ========== */
|
|
206
|
+
--tbw-color-accent: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));
|
|
207
|
+
--tbw-color-accent-fg: var(--eds_text_static_icons__primary_white, rgba(255, 255, 255, 1));
|
|
208
|
+
|
|
209
|
+
/* ========== Dimensions ========== */
|
|
210
|
+
--tbw-row-height: var(--eds_clickbound_default__base, 38px);
|
|
211
|
+
--tbw-header-height: var(--eds_clickbound_default__base, 38px);
|
|
212
|
+
--tbw-cell-padding: 0 var(--eds_spacing_medium, 8px);
|
|
213
|
+
--tbw-cell-padding-header: 0 var(--eds_spacing_medium, 8px);
|
|
214
|
+
--tbw-button-padding: 0.375rem 0.625rem;
|
|
215
|
+
|
|
216
|
+
/* ========== Focus Styling ========== */
|
|
217
|
+
--tbw-focus-outline: 0.5px dotted var(--eds_interactive_focus, rgba(0, 112, 121, 1));
|
|
218
|
+
--tbw-focus-outline-offset: -1px;
|
|
219
|
+
|
|
220
|
+
/* ========== Resize Handle ========== */
|
|
221
|
+
--tbw-resize-handle-color: transparent;
|
|
222
|
+
--tbw-resize-handle-color-hover: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));
|
|
223
|
+
|
|
224
|
+
/* ========== Sort Indicator ========== */
|
|
225
|
+
--tbw-sort-indicator-color: var(--eds_text_static_icons__tertiary, rgba(111, 111, 111, 1));
|
|
226
|
+
--tbw-sort-indicator-active-color: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));
|
|
227
|
+
/* ========== Display Control (v1.5.0+) ========== */
|
|
228
|
+
/* Hide filter button and sort indicator by default, show on hover/active */
|
|
229
|
+
--tbw-filter-btn-display: none;
|
|
230
|
+
--tbw-sort-indicator-display: none;
|
|
231
|
+
|
|
232
|
+
/* ========== Shadows ========== */
|
|
233
|
+
--tbw-color-shadow: rgba(0, 0, 0, 0.1);
|
|
234
|
+
|
|
235
|
+
/* ========== Filter Panel (renders outside tbw-grid, needs :root) ========== */
|
|
236
|
+
--tbw-filter-panel-bg: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
|
|
237
|
+
--tbw-filter-panel-fg: var(--eds_text_static_icons__default, rgba(61, 61, 61, 1));
|
|
238
|
+
--tbw-filter-panel-border: var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
|
|
239
|
+
--tbw-filter-panel-radius: var(--eds_shape_button_border_radius, 4px);
|
|
240
|
+
--tbw-filter-panel-shadow: rgba(0, 0, 0, 0.15);
|
|
241
|
+
--tbw-filter-input-bg: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
|
|
242
|
+
--tbw-filter-input-border: var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
|
|
243
|
+
--tbw-filter-input-radius: var(--eds_shape_button_border_radius, 4px);
|
|
244
|
+
--tbw-filter-input-focus: var(--eds_interactive_focus, rgba(0, 112, 121, 1));
|
|
245
|
+
--tbw-filter-accent: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));
|
|
246
|
+
--tbw-filter-accent-fg: var(--eds_text_static_icons__primary_white, rgba(255, 255, 255, 1));
|
|
247
|
+
--tbw-filter-hover: var(--eds_ui_background__light, rgba(247, 247, 247, 1));
|
|
248
|
+
--tbw-filter-muted: var(--eds_text_static_icons__tertiary, rgba(111, 111, 111, 1));
|
|
249
|
+
--tbw-filter-divider: var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
|
|
250
|
+
--tbw-filter-active-color: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));
|
|
251
|
+
|
|
252
|
+
/* ========== Filter Button Styling (v1.3.1+) ========== */
|
|
253
|
+
--tbw-filter-btn-padding: 8px 16px;
|
|
254
|
+
--tbw-filter-btn-font-weight: 500;
|
|
255
|
+
--tbw-filter-btn-min-height: var(--eds_clickbound_default__base, 48px);
|
|
256
|
+
--tbw-filter-search-padding: 6px 8px;
|
|
257
|
+
--tbw-filter-item-height: 36px; /* Virtualization height - matches EDS touch target */
|
|
258
|
+
|
|
259
|
+
/* ========== Panel Layout ========== */
|
|
260
|
+
--tbw-panel-padding: var(--eds_spacing_medium_small, 12px);
|
|
261
|
+
--tbw-panel-gap: var(--eds_spacing_small, 8px);
|
|
262
|
+
--tbw-animation-duration: 150ms;
|
|
263
|
+
|
|
264
|
+
|
|
265
|
+
/* ========== Context Menu ========== */
|
|
266
|
+
--tbw-context-menu-bg: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
|
|
267
|
+
--tbw-context-menu-fg: var(--eds_text_static_icons__default, rgba(61, 61, 61, 1));
|
|
268
|
+
--tbw-context-menu-border: var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
|
|
269
|
+
--tbw-context-menu-hover: var(--eds_interactive_table__cell__fill_hover, rgba(234, 234, 234, 1));
|
|
270
|
+
--tbw-context-menu-danger: var(--eds_interactive_danger__resting, rgba(235, 0, 0, 1));
|
|
271
|
+
--tbw-context-menu-muted: var(--eds_text_static_icons__tertiary, rgba(111, 111, 111, 1));
|
|
272
|
+
--tbw-context-menu-font-size: 0.873rem;
|
|
273
|
+
--tbw-context-menu-font-family: Equinor, sans-serif;
|
|
274
|
+
--tbw-context-menu-icon-size: 1.2rem;
|
|
275
|
+
--tbw-context-menu-item-padding: 8px 16px;
|
|
276
|
+
--tbw-context-menu-item-gap: 8px;
|
|
277
|
+
--tbw-context-menu-radius: var(--eds_shape_button_border_radius, 4px);
|
|
278
|
+
--tbw-context-menu-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
279
|
+
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/*
|
|
283
|
+
Everything below here is to apply baseline CSS to tbw-grid.
|
|
284
|
+
Some of these will be revisited in the future to give more flexibility to app-teams (or based on new EDS tokens)
|
|
285
|
+
*/
|
|
286
|
+
|
|
287
|
+
.tbw-context-menu {
|
|
288
|
+
.tbw-context-menu-shortcut kbd {
|
|
289
|
+
background: var(--eds_ui_background__light, rgba(247, 247, 247, 1));
|
|
290
|
+
border: 1px solid var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
|
|
291
|
+
border-radius: 4px;
|
|
292
|
+
padding: 2px 6px;
|
|
293
|
+
font-family: 'Equinor Mono', 'Consolas', 'Courier New', monospace;
|
|
294
|
+
font-size: 0.75rem;
|
|
295
|
+
line-height: 1.4;
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
/**
|
|
300
|
+
* EDS Compact Mode
|
|
301
|
+
* Apply with: <tbw-grid class="eds-theme eds-compact">
|
|
302
|
+
*/
|
|
303
|
+
|
|
304
|
+
tbw-grid.eds-compact,
|
|
305
|
+
.eds-compact tbw-grid {
|
|
306
|
+
--tbw-row-height: 21px;
|
|
307
|
+
--tbw-header-height: 23px;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
/**
|
|
311
|
+
* Additional styling that can't be done with variables alone
|
|
312
|
+
*/
|
|
313
|
+
|
|
314
|
+
/* Toolbar content slot alignment */
|
|
315
|
+
|
|
316
|
+
tbw-grid .tbw-toolbar-content-slot {
|
|
317
|
+
display: flex;
|
|
318
|
+
place-items: center;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
/** For numeric cells, header and data should be right aligned */
|
|
322
|
+
|
|
323
|
+
tbw-grid .cell[data-type='number'] {
|
|
324
|
+
text-align: right;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
tbw-grid [part='cell'],
|
|
328
|
+
tbw-grid [part='cell'],
|
|
329
|
+
tbw-grid .data-grid-row .cell,
|
|
330
|
+
tbw-grid .data-grid-row .cell {
|
|
331
|
+
font-weight: 500; /* Match EDS medium weight for body cells */
|
|
332
|
+
height: var(--tbw-row-height); /* toolbox grid only sets min-height */
|
|
333
|
+
|
|
334
|
+
/* When cell is in edit mode */
|
|
335
|
+
&.editing {
|
|
336
|
+
padding: 2px 1px;
|
|
337
|
+
position: relative;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
/* Editor host container - provides visual boundary for all editor types */
|
|
341
|
+
& .tbw-editor-host {
|
|
342
|
+
border: 1px solid var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
|
|
343
|
+
background: white;
|
|
344
|
+
display: flex;
|
|
345
|
+
align-items: center;
|
|
346
|
+
width: 100%;
|
|
347
|
+
height: 100%;
|
|
348
|
+
box-sizing: border-box;
|
|
349
|
+
padding: var(--tbw-cell-padding, 0 6px);
|
|
350
|
+
&:focus-within {
|
|
351
|
+
box-shadow: inset 0 -2px 0 0 var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));
|
|
352
|
+
outline: none;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
/* Simple inputs (not wrapped in mat-form-field) */
|
|
356
|
+
& > input[type='text'],
|
|
357
|
+
& > input[type='number'] {
|
|
358
|
+
border: none;
|
|
359
|
+
background: transparent;
|
|
360
|
+
font: inherit;
|
|
361
|
+
color: inherit;
|
|
362
|
+
padding: 0 4px;
|
|
363
|
+
outline: none;
|
|
364
|
+
width: 100%;
|
|
365
|
+
height: 100%;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
/* Native select element (built-in select editor) */
|
|
369
|
+
& > select {
|
|
370
|
+
border: none;
|
|
371
|
+
background: transparent;
|
|
372
|
+
font: inherit;
|
|
373
|
+
color: inherit;
|
|
374
|
+
padding: 0 4px;
|
|
375
|
+
outline: none;
|
|
376
|
+
width: 100%;
|
|
377
|
+
height: 100%;
|
|
378
|
+
cursor: pointer;
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
&.cell-focus {
|
|
382
|
+
background: rgba(from var(--tbw-color-accent) r g b / 8%);
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
/**
|
|
387
|
+
* EDS Underline Input Style for Filter Panel Inputs
|
|
388
|
+
* Applies to search, range, and date inputs within filter panels
|
|
389
|
+
*/
|
|
390
|
+
|
|
391
|
+
.tbw-filter-panel {
|
|
392
|
+
max-width: none;
|
|
393
|
+
max-height: none;
|
|
394
|
+
/* EDS underline input style - requires direct CSS (no variables available for box-shadow/height) */
|
|
395
|
+
& .tbw-filter-search-input,
|
|
396
|
+
& .tbw-filter-range-input,
|
|
397
|
+
& .tbw-filter-date-input {
|
|
398
|
+
height: var(--tbw-row-height);
|
|
399
|
+
border: none;
|
|
400
|
+
border-radius: 0;
|
|
401
|
+
box-shadow: inset 0px -1px 0px 0px var(--eds_text__static_icons__tertiary, rgba(111, 111, 111, 1));
|
|
402
|
+
background: var(--eds_ui_background__light, rgba(247, 247, 247, 1));
|
|
403
|
+
outline: 1px solid transparent;
|
|
404
|
+
outline-offset: 0px;
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
/*
|
|
409
|
+
* Header font-weight and letter-spacing are now handled by CSS variables:
|
|
410
|
+
* --tbw-font-weight-header: 700
|
|
411
|
+
* --tbw-header-letter-spacing: normal
|
|
412
|
+
* (Defined in the :root block above)
|
|
413
|
+
*/
|
|
414
|
+
|
|
415
|
+
/**
|
|
416
|
+
* Default Toolbox Filter Panel - EDS Overrides
|
|
417
|
+
*
|
|
418
|
+
* Most styling is now handled by CSS variables (v1.3.1+):
|
|
419
|
+
* - --tbw-filter-btn-padding: 8px 16px
|
|
420
|
+
* - --tbw-filter-btn-font-weight: 500
|
|
421
|
+
* - --tbw-filter-btn-min-height: 48px
|
|
422
|
+
* - --tbw-filter-search-padding: 6px 8px
|
|
423
|
+
* - --tbw-filter-item-height: 36px
|
|
424
|
+
*
|
|
425
|
+
* Below are additional EDS-specific input styling tweaks.
|
|
426
|
+
*/
|
|
427
|
+
|
|
428
|
+
.tbw-filter-search-input,
|
|
429
|
+
.tbw-filter-panel .tbw-filter-search-input {
|
|
430
|
+
font-size: 1rem;
|
|
431
|
+
font-weight: 400;
|
|
432
|
+
letter-spacing: 0.025em;
|
|
433
|
+
line-height: 1.5em;
|
|
434
|
+
min-height: 36px;
|
|
435
|
+
box-sizing: border-box;
|
|
436
|
+
border-top: 0;
|
|
437
|
+
border-left: 0;
|
|
438
|
+
border-right: 0;
|
|
439
|
+
background: var(--eds_ui_background__light, rgba(247, 247, 247, 1));
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
/**
|
|
443
|
+
* Angular Material Editor Theming
|
|
444
|
+
*
|
|
445
|
+
* Strip Material styling from editors inside the grid.
|
|
446
|
+
* The .tbw-editor-host provides the visual container (border + background),
|
|
447
|
+
* so Material components inside should be transparent/minimal.
|
|
448
|
+
*/
|
|
449
|
+
|
|
450
|
+
tbw-grid {
|
|
451
|
+
--mat-checkbox-state-layer-size: 20px;
|
|
452
|
+
/* Make form fields transparent - container provides styling */
|
|
453
|
+
--mdc-filled-text-field-container-color: transparent;
|
|
454
|
+
--mdc-filled-text-field-active-indicator-color: transparent;
|
|
455
|
+
--mdc-filled-text-field-hover-active-indicator-color: transparent;
|
|
456
|
+
--mdc-filled-text-field-focus-active-indicator-color: transparent;
|
|
457
|
+
|
|
458
|
+
/* Outlined variant - also transparent */
|
|
459
|
+
--mdc-outlined-text-field-outline-color: transparent;
|
|
460
|
+
--mdc-outlined-text-field-focus-outline-color: transparent;
|
|
461
|
+
--mdc-outlined-text-field-hover-outline-color: transparent;
|
|
462
|
+
|
|
463
|
+
& .mat-mdc-icon-button.mat-mdc-button-base {
|
|
464
|
+
--mdc-icon-button-state-layer-size: 28px;
|
|
465
|
+
--mat-icon-button-state-layer-size: 28px;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
/* Strip mat-form-field completely inside editors */
|
|
469
|
+
& .tbw-editor-host {
|
|
470
|
+
/* Checkbox centering */
|
|
471
|
+
& .editor-checkbox {
|
|
472
|
+
display: flex;
|
|
473
|
+
align-items: center;
|
|
474
|
+
justify-content: center;
|
|
475
|
+
height: 100%;
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
}
|