@entur/table 4.6.40 → 4.7.0

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.
Files changed (9) hide show
  1. package/dist/DataCell.d.ts +3 -1
  2. package/dist/styles.css +333 -158
  3. package/dist/table.cjs.development.js +29 -6
  4. package/dist/table.cjs.development.js.map +1 -1
  5. package/dist/table.cjs.production.min.js +1 -1
  6. package/dist/table.cjs.production.min.js.map +1 -1
  7. package/dist/table.esm.js +29 -6
  8. package/dist/table.esm.js.map +1 -1
  9. package/package.json +9 -9
package/dist/DataCell.d.ts CHANGED
@@ -6,7 +6,9 @@ export type DataCellProps = {
6
6
  className?: string;
7
7
  /** Størrelse som settes for DataCell for ulikt innhold av komponenter */
8
8
  padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';
9
- /** Viser en status-sirkel for DataCell */
9
+ /** @deprecated bruk variant */
10
10
  status?: 'positive' | 'negative' | 'neutral';
11
+ /** Hvilken type status man vil vise */
12
+ variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
11
13
  } & React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>;
12
14
  export declare const DataCell: React.ForwardRefExoticComponent<Omit<DataCellProps, "ref"> & React.RefAttributes<HTMLTableDataCellElement>>;
package/dist/styles.css CHANGED
@@ -1,9 +1,9 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
3
  .eds-table__header-cell {
4
- color: #656782;
5
- font-size: 0.875rem;
6
- font-weight: 500;
4
+ color: var(--components-table-standard-text);
5
+ font-size: 1rem;
6
+ font-weight: 600;
7
7
  text-align: left;
8
8
  height: 3rem;
9
9
  padding: 0 1.5rem;
@@ -12,8 +12,8 @@
12
12
  padding: 0 1rem;
13
13
  }
14
14
  .eds-contrast .eds-table__header-cell {
15
- color: #aeb7e2;
16
- border-bottom-color: #393d79;
15
+ color: var(--components-table-contrast-text);
16
+ border-bottom-color: var(--components-table-contrast-stroke);
17
17
  }
18
18
  .eds-table__header-cell--padding-checkbox {
19
19
  width: 3rem;
@@ -28,10 +28,13 @@
28
28
  padding: 1rem 0.75rem;
29
29
  }
30
30
  .eds-table__header-cell--sortable:focus {
31
- outline: none;
32
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
31
+ outline: 2px solid #181c56;
32
+ outline-color: var(--basecolors-stroke-focus-standard);
33
33
  outline-offset: 0.125rem;
34
34
  }
35
+ .eds-contrast .eds-table__header-cell--sortable:focus {
36
+ outline-color: var(--basecolors-stroke-focus-contrast);
37
+ }
35
38
  .eds-table__header-cell-button {
36
39
  position: relative;
37
40
  text-align: left;
@@ -55,17 +58,19 @@
55
58
  }
56
59
  .eds-table__header-cell-button:focus {
57
60
  outline: 2px solid #181c56;
61
+ outline-color: var(--basecolors-stroke-focus-standard);
62
+ outline-offset: 0.125rem;
58
63
  }
59
64
  .eds-contrast .eds-table__header-cell-button:focus {
60
- outline: 2px solid #ffffff;
65
+ outline-color: var(--basecolors-stroke-focus-contrast);
61
66
  }
62
67
  .eds-table--sticky-header .eds-table__header-cell {
63
- background-color: #ffffff;
68
+ background-color: var(--components-table-standard-fill);
64
69
  position: sticky;
65
70
  top: 0;
66
71
  }
67
72
  .eds-contrast .eds-table--sticky-header .eds-table__header-cell {
68
- background-color: #181c56;
73
+ background-color: var(--components-table-contrast-fill);
69
74
  }
70
75
  /* DO NOT CHANGE!*/
71
76
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -78,110 +83,16 @@
78
83
  .eds-table--small .eds-editable-cell {
79
84
  padding: 0.125rem 0.5rem;
80
85
  }
81
- .eds-editable-cell.eds-editable-cell--outlined .eds-form-control-wrapper {
82
- border-color: #d1d3d3;
83
- background: #ffffff;
84
- }
85
- .eds-contrast .eds-editable-cell.eds-editable-cell--outlined .eds-form-control-wrapper {
86
- border-color: #393d79;
87
- color: #181c56;
88
- }
89
- .eds-editable-cell .eds-form-control-wrapper {
90
- background: #ffffff;
91
- font-family: inherit;
92
- font-size: 1rem;
93
- line-height: 1.25rem;
94
- margin: 0;
95
- text-transform: none;
96
- color: inherit;
97
- background: none;
98
- text-align: inherit;
99
- margin: 0 0;
100
- width: 100%;
101
- border: 0.0625rem solid transparent;
102
- border-radius: 0.25rem;
103
- line-height: 1.5rem;
104
- min-height: 24px;
105
- background: #ffffff;
106
- color: inherit;
107
- }
108
- .eds-editable-cell .eds-form-control-wrapper::before, .eds-editable-cell .eds-form-control-wrapper::after {
109
- opacity: 0;
110
- }
111
- .eds-table__row:hover .eds-editable-cell .eds-form-control-wrapper {
112
- border-color: #d1d3d3;
113
- background: #ffffff;
114
- }
115
- .eds-table__row:hover .eds-editable-cell .eds-form-control-wrapper:active, .eds-table__row:hover .eds-editable-cell .eds-form-control-wrapper[focus-within] {
116
- outline-offset: 0.125rem;
117
- border: 0.0625rem solid #181c56;
118
- border-radius: 0.25rem;
119
- }
120
- .eds-table__row:hover .eds-editable-cell .eds-form-control-wrapper:active, .eds-table__row:hover .eds-editable-cell .eds-form-control-wrapper:focus-within {
121
- outline-offset: 0.125rem;
122
- border: 0.0625rem solid #181c56;
123
- border-radius: 0.25rem;
124
- }
125
- .eds-contrast .eds-table__row:hover .eds-editable-cell .eds-form-control-wrapper:active, .eds-contrast .eds-table__row:hover .eds-editable-cell .eds-form-control-wrapper[focus-within] {
126
- border-color: #aeb7e2;
127
- }
128
- .eds-contrast .eds-table__row:hover .eds-editable-cell .eds-form-control-wrapper:active, .eds-contrast .eds-table__row:hover .eds-editable-cell .eds-form-control-wrapper:focus-within {
129
- border-color: #aeb7e2;
130
- }
131
- .eds-contrast .eds-table__row:hover .eds-editable-cell .eds-form-control-wrapper {
132
- border-color: #393d79;
133
- color: #181c56;
134
- }
135
- .eds-editable-cell .eds-form-control-wrapper:active, .eds-editable-cell .eds-form-control-wrapper[focus-within] {
136
- outline-offset: 0.125rem;
137
- border: 0.0625rem solid #181c56;
138
- border-radius: 0.25rem;
139
- }
140
- .eds-editable-cell .eds-form-control-wrapper:active, .eds-editable-cell .eds-form-control-wrapper:focus-within {
141
- outline-offset: 0.125rem;
142
- border: 0.0625rem solid #181c56;
143
- border-radius: 0.25rem;
144
- }
145
- .eds-contrast .eds-editable-cell .eds-form-control-wrapper:active, .eds-contrast .eds-editable-cell .eds-form-control-wrapper[focus-within] {
146
- border-color: #aeb7e2;
147
- background: #ffffff;
148
- color: #181c56;
149
- }
150
- .eds-contrast .eds-editable-cell .eds-form-control-wrapper:active, .eds-contrast .eds-editable-cell .eds-form-control-wrapper:focus-within {
151
- border-color: #aeb7e2;
152
- background: #ffffff;
153
- color: #181c56;
154
- }
155
- .eds-table__row:hover .eds-editable-cell .eds-form-control-wrapper--error:active, .eds-table__row:hover .eds-editable-cell .eds-form-control-wrapper--error[focus-within] {
156
- border-color: transparent;
157
- }
158
- .eds-table__row:hover .eds-editable-cell .eds-form-control-wrapper--error:active, .eds-table__row:hover .eds-editable-cell .eds-form-control-wrapper--error:focus-within {
159
- border-color: transparent;
160
- }
161
- .eds-editable-cell .eds-form-control-wrapper--error:active, .eds-editable-cell .eds-form-control-wrapper--error[focus-within] {
162
- border-color: transparent;
163
- }
164
- .eds-editable-cell .eds-form-control-wrapper--error:active, .eds-editable-cell .eds-form-control-wrapper--error:focus-within {
165
- border-color: transparent;
166
- }
167
- .eds-editable-cell .eds-form-control-wrapper--error::before, .eds-editable-cell .eds-form-control-wrapper--error::after {
168
- opacity: 1;
169
- }
170
- .eds-contrast .eds-editable-cell .eds-form-control-wrapper {
171
- color: #ffffff;
172
- background: transparent;
173
- transition: background ease-in-out 0.1s;
86
+ .eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) {
87
+ min-height: 0;
174
88
  }
175
- .eds-editable-cell .eds-form-control-wrapper .eds-form-control {
89
+ .eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
176
90
  padding: 0.75rem;
177
91
  }
178
- .eds-contrast .eds-editable-cell .eds-form-control-wrapper .eds-form-control:hover, .eds-contrast .eds-editable-cell .eds-form-control-wrapper .eds-form-control:active {
179
- color: #181c56;
180
- }
181
- .eds-table--middle .eds-editable-cell .eds-form-control-wrapper .eds-form-control {
92
+ .eds-table--middle .eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
182
93
  padding: 0.25rem calc(0.5rem - 0.0625rem);
183
94
  }
184
- .eds-table--small .eds-editable-cell .eds-form-control-wrapper .eds-form-control {
95
+ .eds-table--small .eds-editable-cell .eds-form-control-wrapper:not(.eds-datepicker__datefield) .eds-form-control {
185
96
  padding: calc(0.25rem - 0.125rem) calc(0.5rem - 0.0625rem);
186
97
  }
187
98
  /* DO NOT CHANGE!*/
@@ -192,8 +103,308 @@
192
103
  .eds-expand-row-button--open .eds-expand-row-button__icon {
193
104
  transform: rotate(180deg);
194
105
  }
106
+ @import "~@entur/tokens/dist/primitive.css";
107
+ @import "~@entur/tokens/dist/semantic.css";
108
+ /* DO NOT CHANGE!*/
109
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
195
110
  /* DO NOT CHANGE!*/
196
111
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
112
+ :root {
113
+ --fill-background-contrast-dark: var(--ebony-90);
114
+ --fill-background-contrast-light: var(--lavender-90);
115
+ --fill-background-contrast-lightalt: var(--blue-90);
116
+ --fill-background-contrast-lightalt-2: var(--blue-100);
117
+ --fill-background-overlay-solid: var(--ebony-80);
118
+ --fill-background-overlay-solidalt: var(--ebony-75);
119
+ --fill-background-overlay-transparent: var(--transparent-ebony-alpha15);
120
+ --fill-background-overlay-transparentalt: var(--transparent-ebony-alpha25);
121
+ --fill-background-standard-colorless: var(--white-alpha-0);
122
+ --fill-background-standard-dark: var(--ebony-100);
123
+ --fill-background-standard-light: var(--white-alpha-100);
124
+ --fill-background-subdued-dark: var(--ebony-85);
125
+ --fill-background-subdued-light: var(--blue-30);
126
+ --fill-background-tint-dark: var(--ebony-95);
127
+ --fill-background-tint-light: var(--blue-10);
128
+ --fill-background-tint-neutral: var(--grey-10);
129
+ --fill-background-tint-transparent: var(--transparent-blue-alpha10);
130
+ --fill-boolean-false-contrast: var(--blue-50);
131
+ --fill-boolean-false-dark: var(--transparent-ebony-alpha35);
132
+ --fill-boolean-false-light: var(--grey-60);
133
+ --fill-boolean-true-contrast: var(--mint-40);
134
+ --fill-boolean-true-dark: var(--mint-40);
135
+ --fill-boolean-true-light: var(--mint-60);
136
+ --fill-disabled-light: var(--grey-40);
137
+ --fill-disabled-transparent: var(--transparent-neutral-alpha15);
138
+ --fill-disabled-transparentalt: var(--transparent-neutral-alpha10);
139
+ --fill-information-contrast: var(--sky-30);
140
+ --fill-information-deep: var(--sky-50);
141
+ --fill-information-muted: var(--sky-10);
142
+ --fill-information-tint: var(--sky-20);
143
+ --fill-negative-contrast: var(--coral-40);
144
+ --fill-negative-dark: var(--coral-90);
145
+ --fill-negative-deep: var(--coral-60);
146
+ --fill-negative-muted: var(--coral-20);
147
+ --fill-negative-tint: var(--coral-30);
148
+ --fill-negative-transparent: var(--transparent-coral-alpha20);
149
+ --fill-primary-active-contrast: var(--lavender-50);
150
+ --fill-primary-active-light: var(--lavender-100);
151
+ --fill-primary-default-contrast: var(--lavender-40);
152
+ --fill-primary-default-light: var(--lavender-90);
153
+ --fill-primary-hover-contrast: var(--lavender-30);
154
+ --fill-primary-hover-light: var(--blue-90);
155
+ --fill-secondary-active-contrast: var(--lavender-50);
156
+ --fill-secondary-active-light: var(--lavender-40);
157
+ --fill-secondary-default-colorless: var(--white-alpha-0);
158
+ --fill-secondary-hover-contrast: var(--blue-70);
159
+ --fill-secondary-hover-light: var(--lavender-20);
160
+ --fill-selected-default-contrast: var(--blue-90);
161
+ --fill-selected-default-dark: var(--ebony-10);
162
+ --fill-selected-default-darkalt: var(--ebony-50);
163
+ --fill-selected-default-light: var(--blue-10);
164
+ --fill-selected-default-neutral: var(--grey-30);
165
+ --fill-selected-hover-contrast: var(--blue-80);
166
+ --fill-selected-hover-dark: var(--transparent-ebony-alpha35);
167
+ --fill-selected-hover-light: var(--blue-20);
168
+ --fill-selected-hover-neutral: var(--grey-20);
169
+ --fill-success-contrast: var(--mint-40);
170
+ --fill-success-deep: var(--mint-60);
171
+ --fill-success-muted: var(--mint-20);
172
+ --fill-success-subdued: var(--mint-50);
173
+ --fill-success-tint: var(--mint-30);
174
+ --fill-warning-contrast: var(--canary-40);
175
+ --fill-warning-deep: var(--canary-60);
176
+ --fill-warning-muted: var(--canary-20);
177
+ --fill-warning-tint: var(--canary-30);
178
+ --shape-accent: var(--lavender-90);
179
+ --shape-contrast: var(--lavender-40);
180
+ --shape-dark: var(--ebony-100);
181
+ --shape-darkalt: var(--ebony-30);
182
+ --shape-disabled: var(--grey-80);
183
+ --shape-highlight: var(--coral-40);
184
+ --shape-highlightalt: var(--coral-30);
185
+ --shape-inactive: var(--blue-40);
186
+ --shape-information: var(--sky-50);
187
+ --shape-informationalt: var(--sky-30);
188
+ --shape-light: var(--white-alpha-100);
189
+ --shape-lightalt: var(--ebony-10);
190
+ --shape-negative: var(--coral-60);
191
+ --shape-negativealt: var(--coral-30);
192
+ --shape-neutral: var(--grey-70);
193
+ --shape-neutralalt: var(--grey-50);
194
+ --shape-neutralalt2: var(--grey-60);
195
+ --shape-subdued: var(--blue-70);
196
+ --shape-subduedalt: var(--blue-30);
197
+ --shape-success: var(--mint-60);
198
+ --shape-successalt: var(--mint-40);
199
+ --shape-warning: var(--canary-60);
200
+ --shape-warningalt: var(--canary-40);
201
+ --stroke-accent: var(--lavender-90);
202
+ --stroke-colorless: var(--white-alpha-0);
203
+ --stroke-contrast: var(--lavender-40);
204
+ --stroke-contrastalt: var(--blue-80);
205
+ --stroke-dark: var(--ebony-30);
206
+ --stroke-darkalt: var(--ebony-50);
207
+ --stroke-darkalt-2: var(--ebony-100);
208
+ --stroke-highlight: var(--coral-40);
209
+ --stroke-highlightalt: var(--coral-30);
210
+ --stroke-information: var(--sky-50);
211
+ --stroke-light: var(--white-alpha-100);
212
+ --stroke-lightalt: var(--ebony-10);
213
+ --stroke-negative: var(--coral-60);
214
+ --stroke-negativealt: var(--coral-30);
215
+ --stroke-neutral: var(--grey-30);
216
+ --stroke-neutralalt: var(--grey-60);
217
+ --stroke-subdued: var(--blue-60);
218
+ --stroke-success: var(--mint-60);
219
+ --stroke-successalt: var(--mint-40);
220
+ --stroke-transparent: var(--transparent-blue-alpha40);
221
+ --stroke-transparentalt: var(--transparent-lavender-alpha70);
222
+ --stroke-warning: var(--canary-70);
223
+ --text-accent: var(--lavender-90);
224
+ --text-dark: var(--ebony-100);
225
+ --text-darkalt: var(--ebony-30);
226
+ --text-disabled: var(--grey-80);
227
+ --text-highlight: var(--lavender-40);
228
+ --text-highlightalt: var(--peach-40);
229
+ --text-light: var(--white-alpha-100);
230
+ --text-lightalt: var(--ebony-10);
231
+ --text-negative: var(--coral-60);
232
+ --text-negativealt: var(--coral-30);
233
+ --text-neutral: var(--grey-70);
234
+ --text-neutralalt: var(--grey-50);
235
+ --text-neutralalt2: var(--grey-60);
236
+ --text-subdued: var(--blue-70);
237
+ --text-subduedalt: var(--blue-30);
238
+ --text-success: var(--mint-60);
239
+ --text-successalt: var(--mint-40);
240
+ }
241
+
242
+ /* DO NOT CHANGE!*/
243
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
244
+ [data-color-mode=light],
245
+ :root {
246
+ --components-table-contrast-fill: var(--fill-background-standard-colorless);
247
+ --components-table-contrast-fill-hover: var(--fill-background-contrast-lightalt);
248
+ --components-table-contrast-fill-negative: var(--fill-negative-transparent);
249
+ --components-table-contrast-icon: var(--shape-light);
250
+ --components-table-contrast-stroke: var(--stroke-subdued);
251
+ --components-table-contrast-text: var(--text-light);
252
+ --components-table-standard-fill: var(--fill-background-standard-colorless);
253
+ --components-table-standard-fill-hover: var(--fill-background-tint-neutral);
254
+ --components-table-standard-fill-negative: var(--fill-negative-muted);
255
+ --components-table-standard-icon: var(--shape-accent);
256
+ --components-table-standard-stroke: var(--stroke-neutral);
257
+ --components-table-standard-text: var(--text-accent);
258
+ }
259
+
260
+ [data-color-mode=dark] {
261
+ --components-table-contrast-fill: var(--fill-background-standard-colorless);
262
+ --components-table-contrast-fill-hover: var(--fill-background-overlay-transparent);
263
+ --components-table-contrast-fill-negative: var(--fill-negative-transparent);
264
+ --components-table-contrast-icon: var(--shape-lightalt);
265
+ --components-table-contrast-stroke: var(--stroke-darkalt);
266
+ --components-table-contrast-text: var(--text-lightalt);
267
+ --components-table-standard-fill: var(--fill-background-standard-colorless);
268
+ --components-table-standard-fill-hover: var(--fill-background-overlay-transparent);
269
+ --components-table-standard-fill-negative: var(--fill-negative-transparent);
270
+ --components-table-standard-icon: var(--shape-lightalt);
271
+ --components-table-standard-stroke: var(--stroke-darkalt);
272
+ --components-table-standard-text: var(--text-lightalt);
273
+ }
274
+
275
+ /* DO NOT CHANGE!*/
276
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
277
+ [data-color-mode=light],
278
+ :root {
279
+ --basecolors-frame-contrast: var(--fill-background-contrast-light);
280
+ --basecolors-frame-contrastalt: var(--fill-background-contrast-lightalt);
281
+ --basecolors-frame-default: var(--fill-background-standard-light);
282
+ --basecolors-frame-elevated: var(--fill-background-standard-light);
283
+ --basecolors-frame-elevatedalt: var(--fill-background-tint-light);
284
+ --basecolors-frame-subdued: var(--fill-background-subdued-light);
285
+ --basecolors-frame-tint: var(--fill-background-tint-light);
286
+ --basecolors-shape-accent: var(--shape-accent);
287
+ --basecolors-shape-bicycle-contrast: var(--contrast-bicycle);
288
+ --basecolors-shape-bicycle-default: var(--standard-bicycle);
289
+ --basecolors-shape-bus-contrast: var(--contrast-bus);
290
+ --basecolors-shape-bus-default: var(--standard-bus);
291
+ --basecolors-shape-cableway-contrast: var(--contrast-cableway);
292
+ --basecolors-shape-cableway-default: var(--standard-cableway);
293
+ --basecolors-shape-disabled: var(--shape-neutral);
294
+ --basecolors-shape-disabledalt: var(--shape-neutralalt);
295
+ --basecolors-shape-ferry-contrast: var(--contrast-ferry);
296
+ --basecolors-shape-ferry-default: var(--standard-ferry);
297
+ --basecolors-shape-funicular-contrast: var(--contrast-funicular);
298
+ --basecolors-shape-funicular-default: var(--standard-funicular);
299
+ --basecolors-shape-helicopter-contrast: var(--contrast-helicopter);
300
+ --basecolors-shape-helicopter-default: var(--standard-helicopter);
301
+ --basecolors-shape-highlight: var(--stroke-highlight);
302
+ --basecolors-shape-light: var(--shape-light);
303
+ --basecolors-shape-mask: var(--shape-light);
304
+ --basecolors-shape-maskalt: var(--shape-light);
305
+ --basecolors-shape-metro-contrast: var(--contrast-metro);
306
+ --basecolors-shape-metro-default: var(--standard-metro);
307
+ --basecolors-shape-mobility-contrast: var(--contrast-mobility);
308
+ --basecolors-shape-mobility-default: var(--standard-mobility);
309
+ --basecolors-shape-plane-contrast: var(--contrast-plane);
310
+ --basecolors-shape-plane-default: var(--standard-plane);
311
+ --basecolors-shape-subdued: var(--shape-subdued);
312
+ --basecolors-shape-subduedalt: var(--shape-subduedalt);
313
+ --basecolors-shape-taxi-contrast: var(--contrast-taxi);
314
+ --basecolors-shape-taxi-default: var(--standard-taxi);
315
+ --basecolors-shape-train-contrast: var(--contrast-train);
316
+ --basecolors-shape-train-default: var(--standard-train);
317
+ --basecolors-shape-tram-contrast: var(--contrast-tram);
318
+ --basecolors-shape-tram-default: var(--standard-tram);
319
+ --basecolors-shape-walk-contrast: var(--contrast-walk);
320
+ --basecolors-shape-walk-default: var(--standard-walk);
321
+ --basecolors-shape-airportlinkbus-contrast: var(--contrast-airportlinkbus);
322
+ --basecolors-shape-airportlinkbus-default: var(--standard-airportlinkbus);
323
+ --basecolors-shape-airportlinkrail-contrast: var(--contrast-airportlinkrail);
324
+ --basecolors-shape-airportlinkrail-default: var(--standard-airportlinkrail);
325
+ --basecolors-stroke-contrast: var(--stroke-contrast);
326
+ --basecolors-stroke-default: var(--stroke-accent);
327
+ --basecolors-stroke-disabled: var(--stroke-neutralalt);
328
+ --basecolors-stroke-focus-contrast: var(--stroke-contrast);
329
+ --basecolors-stroke-focus-standard: var(--stroke-accent);
330
+ --basecolors-stroke-highlight: var(--stroke-highlight);
331
+ --basecolors-stroke-light: var(--stroke-light);
332
+ --basecolors-stroke-subdued: var(--stroke-subdued);
333
+ --basecolors-stroke-subduedalt: var(--stroke-neutral);
334
+ --basecolors-text-accent: var(--text-accent);
335
+ --basecolors-text-disabled: var(--text-neutral);
336
+ --basecolors-text-disabledalt: var(--text-neutralalt);
337
+ --basecolors-text-highlight: var(--stroke-highlight);
338
+ --basecolors-text-light: var(--text-light);
339
+ --basecolors-text-subdued: var(--text-subdued);
340
+ --basecolors-text-subduedalt: var(--text-subduedalt);
341
+ }
342
+
343
+ [data-color-mode=dark] {
344
+ --basecolors-frame-contrast: var(--fill-background-contrast-dark);
345
+ --basecolors-frame-contrastalt: var(--fill-background-tint-dark);
346
+ --basecolors-frame-default: var(--fill-background-standard-dark);
347
+ --basecolors-frame-elevated: var(--fill-background-overlay-transparent);
348
+ --basecolors-frame-elevatedalt: var(--fill-background-overlay-solidalt);
349
+ --basecolors-frame-subdued: var(--fill-background-subdued-dark);
350
+ --basecolors-frame-tint: var(--fill-background-tint-dark);
351
+ --basecolors-shape-accent: var(--shape-lightalt);
352
+ --basecolors-shape-bicycle-contrast: var(--dark-bicycle);
353
+ --basecolors-shape-bicycle-default: var(--dark-bicycle);
354
+ --basecolors-shape-bus-contrast: var(--dark-bus);
355
+ --basecolors-shape-bus-default: var(--dark-bus);
356
+ --basecolors-shape-cableway-contrast: var(--dark-cableway);
357
+ --basecolors-shape-cableway-default: var(--dark-cableway);
358
+ --basecolors-shape-disabled: var(--shape-neutralalt);
359
+ --basecolors-shape-disabledalt: var(--shape-darkalt);
360
+ --basecolors-shape-ferry-contrast: var(--dark-ferry);
361
+ --basecolors-shape-ferry-default: var(--dark-ferry);
362
+ --basecolors-shape-funicular-contrast: var(--dark-funicular);
363
+ --basecolors-shape-funicular-default: var(--dark-funicular);
364
+ --basecolors-shape-helicopter-contrast: var(--dark-helicopter);
365
+ --basecolors-shape-helicopter-default: var(--dark-helicopter);
366
+ --basecolors-shape-highlight: var(--stroke-highlightalt);
367
+ --basecolors-shape-light: var(--shape-lightalt);
368
+ --basecolors-shape-mask: var(--fill-background-subdued-dark);
369
+ --basecolors-shape-maskalt: var(--fill-background-overlay-solid);
370
+ --basecolors-shape-metro-contrast: var(--dark-metro);
371
+ --basecolors-shape-metro-default: var(--dark-metro);
372
+ --basecolors-shape-mobility-contrast: var(--dark-mobility);
373
+ --basecolors-shape-mobility-default: var(--dark-mobility);
374
+ --basecolors-shape-plane-contrast: var(--dark-plane);
375
+ --basecolors-shape-plane-default: var(--dark-plane);
376
+ --basecolors-shape-subdued: var(--shape-darkalt);
377
+ --basecolors-shape-subduedalt: var(--shape-darkalt);
378
+ --basecolors-shape-taxi-contrast: var(--dark-taxi);
379
+ --basecolors-shape-taxi-default: var(--dark-taxi);
380
+ --basecolors-shape-train-contrast: var(--dark-train);
381
+ --basecolors-shape-train-default: var(--dark-train);
382
+ --basecolors-shape-tram-contrast: var(--dark-tram);
383
+ --basecolors-shape-tram-default: var(--dark-tram);
384
+ --basecolors-shape-walk-contrast: var(--dark-walk);
385
+ --basecolors-shape-walk-default: var(--dark-walk);
386
+ --basecolors-shape-airportlinkbus-contrast: var(--dark-airportlinkbus);
387
+ --basecolors-shape-airportlinkbus-default: var(--dark-airportlinkbus);
388
+ --basecolors-shape-airportlinkrail-contrast: var(--dark-airportlinkrail);
389
+ --basecolors-shape-airportlinkrail-default: var(--dark-airportlinkrail);
390
+ --basecolors-stroke-contrast: var(--stroke-contrast);
391
+ --basecolors-stroke-default: var(--stroke-dark);
392
+ --basecolors-stroke-disabled: var(--stroke-neutral);
393
+ --basecolors-stroke-focus-contrast: var(--stroke-contrast);
394
+ --basecolors-stroke-focus-standard: var(--stroke-contrast);
395
+ --basecolors-stroke-highlight: var(--stroke-highlightalt);
396
+ --basecolors-stroke-light: var(--stroke-dark);
397
+ --basecolors-stroke-subdued: var(--stroke-darkalt);
398
+ --basecolors-stroke-subduedalt: var(--stroke-darkalt);
399
+ --basecolors-text-accent: var(--text-lightalt);
400
+ --basecolors-text-disabled: var(--text-neutralalt);
401
+ --basecolors-text-disabledalt: var(--text-neutralalt);
402
+ --basecolors-text-highlight: var(--stroke-highlightalt);
403
+ --basecolors-text-light: var(--text-lightalt);
404
+ --basecolors-text-subdued: var(--text-darkalt);
405
+ --basecolors-text-subduedalt: var(--text-darkalt);
406
+ }
407
+
197
408
  :root {
198
409
  --eds-table: 1;
199
410
  }
@@ -213,7 +424,7 @@
213
424
  padding: 1rem 1.5rem;
214
425
  }
215
426
  .eds-contrast .eds-table__data-cell {
216
- border-bottom-color: #393d79;
427
+ border-bottom-color: var(--components-table-contrast-stroke);
217
428
  }
218
429
  .eds-table--middle .eds-table__data-cell {
219
430
  padding: 0.5rem 1rem;
@@ -235,74 +446,38 @@
235
446
  width: 3rem;
236
447
  padding: 1rem 0.75rem;
237
448
  }
238
- .eds-table__data-cell[class*=eds-table__data-cell--status] {
239
- position: relative;
240
- }
241
- .eds-table__data-cell[class*=eds-table__data-cell--status]:before {
242
- left: 0;
243
- top: 1.3125rem;
244
- content: "";
245
- position: absolute;
246
- height: 0.625rem;
247
- width: 0.625rem;
248
- border-radius: 50%;
249
- }
250
- .eds-table--small .eds-table__data-cell[class*=eds-table__data-cell--status]:before {
251
- top: 0.5625rem;
252
- }
253
- .eds-table--middle .eds-table__data-cell[class*=eds-table__data-cell--status]:before {
254
- top: 0.8125rem;
255
- }
256
- .eds-table__data-cell--status-positive:before {
257
- background: #1a8e60;
258
- }
259
- .eds-contrast .eds-table__data-cell--status-positive:before {
260
- background: #5ac39a;
261
- }
262
- .eds-table__data-cell--status-negative:before {
263
- background: #d31b1b;
264
- }
265
- .eds-contrast .eds-table__data-cell--status-negative:before {
266
- background: #ff9494;
267
- }
268
- .eds-table__data-cell--status-neutral:before {
269
- background: #d1d3d3;
270
- }
271
- .eds-contrast .eds-table__data-cell--status-neutral:before {
272
- background: #babbcf;
273
- }
274
449
  .eds-table__body > .eds-table__row {
275
- border-bottom: 0.125rem solid #e9e9e9;
450
+ border-bottom: 0.0625rem solid var(--components-table-standard-stroke);
276
451
  }
277
452
  .eds-contrast .eds-table__body > .eds-table__row {
278
- border-color: #393d79;
453
+ border-color: var(--components-table-contrast-stroke);
279
454
  }
280
455
  .eds-table__body > .eds-table__row:focus {
281
456
  outline: 2px solid #181c56;
282
457
  }
283
458
  .eds-table__body > .eds-table__row--hover:hover {
284
- background: #f3f3f3;
459
+ background: var(--components-table-standard-fill-hover);
285
460
  }
286
461
  .eds-contrast .eds-table__body > .eds-table__row--hover:hover {
287
- background: #292b6a;
462
+ background: var(--components-table-contrast-fill-hover);
288
463
  }
289
464
  .eds-table__body > .eds-table__row--active {
290
- background: #ebebf1;
291
- border: 0.125rem solid #d1d4e3;
465
+ background: var(--components-table-standard-fill-hover);
292
466
  }
293
467
  .eds-contrast .eds-table__body > .eds-table__row--active {
294
- border-color: #393d79;
295
- background: #393d79;
468
+ background: var(--components-table-contrast-fill-hover);
296
469
  }
297
470
  .eds-table__body > .eds-table__row--error {
298
- background: #ffcece;
299
- border-color: #ff9494;
471
+ background: var(--components-table-contrast-fill-negative);
472
+ }
473
+ .eds-contrast .eds-table__body > .eds-table__row--error {
474
+ background: var(--components-table-contrast-fill-negative);
300
475
  }
301
476
  .eds-table__head {
302
- border-bottom: 0.125rem solid #e9e9e9;
477
+ border-bottom: 0.125rem solid var(--components-table-standard-stroke);
303
478
  }
304
479
  .eds-contrast .eds-table__head {
305
- border-color: #393d79;
480
+ border-color: var(--components-table-contrast-stroke);
306
481
  }
307
482
  .eds-table--sticky-header .eds-table__head {
308
483
  position: sticky;
package/dist/table.cjs.development.js CHANGED
@@ -6,6 +6,7 @@ var utils = require('@entur/utils');
6
6
  var React = require('react');
7
7
  var classNames = require('classnames');
8
8
  var a11y = require('@entur/a11y');
9
+ var layout = require('@entur/layout');
9
10
  var icons = require('@entur/icons');
10
11
  var get = require('lodash.get');
11
12
  var form = require('@entur/form');
@@ -149,19 +150,41 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
149
150
  }, rest));
150
151
  });
151
152
 
152
- var _excluded$4 = ["className", "padding", "status"];
153
+ var _excluded$4 = ["className", "padding", "status", "variant", "children"];
154
+ function mapStatusToVariant(status) {
155
+ switch (status) {
156
+ case 'positive':
157
+ return 'success';
158
+ case 'negative':
159
+ return 'danger';
160
+ case 'neutral':
161
+ return 'neutral';
162
+ default:
163
+ return 'neutral';
164
+ }
165
+ }
153
166
  var DataCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
154
- var _classNames;
155
167
  var className = _ref.className,
156
168
  _ref$padding = _ref.padding,
157
169
  padding = _ref$padding === void 0 ? 'default' : _ref$padding,
158
- _ref$status = _ref.status,
159
- status = _ref$status === void 0 ? undefined : _ref$status,
170
+ status = _ref.status,
171
+ variant = _ref.variant,
172
+ children = _ref.children,
160
173
  rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
174
+ // If variant is undefined and status is defined, map status to variant
175
+ if (!variant && status) {
176
+ variant = mapStatusToVariant(status);
177
+ }
161
178
  return React.createElement("td", _extends({
162
179
  ref: ref,
163
- className: classNames('eds-table__data-cell', className, (_classNames = {}, _classNames["eds-table__data-cell--status-" + status] = status, _classNames['eds-table__data-cell--padding-checkbox'] = padding === 'checkbox', _classNames['eds-table__data-cell--padding-radio'] = padding === 'radio', _classNames['eds-table__data-cell--padding-overflow-menu'] = padding === 'overflow-menu', _classNames))
164
- }, rest));
180
+ className: classNames('eds-table__data-cell', className, {
181
+ 'eds-table__data-cell--padding-checkbox': padding === 'checkbox',
182
+ 'eds-table__data-cell--padding-radio': padding === 'radio',
183
+ 'eds-table__data-cell--padding-overflow-menu': padding === 'overflow-menu'
184
+ })
185
+ }, rest), variant ? React.createElement(layout.BulletBadge, {
186
+ variant: variant
187
+ }, children) : children);
165
188
  });
166
189
 
167
190
  var _excluded$3 = ["className", "children", "name", "sortable", "sortConfig", "padding", "sortableButtonProps", "sortedAscendingAriaLabel", "sortedDescendingAriaLabel"],