@entur/datepicker 9.3.0 → 9.3.2

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 (2) hide show
  1. package/dist/styles.css +241 -55
  2. package/package.json +10 -10
package/dist/styles.css CHANGED
@@ -18,14 +18,40 @@
18
18
  }
19
19
  /* DO NOT CHANGE!*/
20
20
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
21
+ [dir="ltr"] .eds-date-and-time-field__segment {
22
+ text-align: right;
23
+ }
24
+ [dir="rtl"] .eds-date-and-time-field__segment {
25
+ text-align: left;
26
+ }
27
+ .eds-date-and-time-field__segment {
28
+ margin-top: 1rem;
29
+ padding: 0 2px;
30
+ font-feature-settings: "tnum";
31
+ font-variant-numeric: tabular-nums;
32
+ }
33
+ .eds-date-and-time-field__segment--placeholder {
34
+ color: var(--components-datepicker-datefield-standard-text-content);
35
+ }
36
+ .eds-date-and-time-field__segment--dot-separator {
37
+ margin-left: -0.1rem;
38
+ margin-right: -0.2rem;
39
+ }
40
+ .eds-date-and-time-field__segment:focus {
41
+ background-color: var(--components-button-iconbutton-standard-active);
42
+ outline: transparent;
43
+ border-radius: 0.0625rem;
44
+ }
45
+ /* DO NOT CHANGE!*/
46
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
21
47
  .eds-datepicker__calendar,
22
48
  .eds-contrast .eds-datepicker__calendar {
23
49
  width: -moz-fit-content;
24
50
  width: fit-content;
25
51
  padding: 1.5rem;
26
52
  padding-top: 0.75rem;
27
- background-color: #ffffff;
28
- color: #181c56;
53
+ background-color: var(--components-datepicker-calendar-background);
54
+ color: var(--components-datepicker-calendar-text-subdued);
29
55
  border-radius: 4px;
30
56
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
31
57
  }
@@ -34,24 +60,30 @@
34
60
  display: flex;
35
61
  justify-content: space-between;
36
62
  align-items: center;
63
+ color: var(--components-datepicker-calendar-text-accent);
37
64
  }
38
65
  .eds-datepicker__calendar__header h2,
39
66
  .eds-contrast .eds-datepicker__calendar__header h2 {
40
67
  font-size: 1rem;
41
68
  font-weight: 600;
42
69
  }
70
+ .eds-datepicker__calendar__header .eds-icon-button,
71
+ .eds-contrast .eds-datepicker__calendar__header .eds-icon-button {
72
+ color: var(--components-button-iconbutton-standard-text);
73
+ }
43
74
  .eds-datepicker__calendar__header .eds-icon-button:hover,
44
75
  .eds-contrast .eds-datepicker__calendar__header .eds-icon-button:hover {
45
- background-color: #656782;
46
- color: #ffffff;
76
+ background-color: var(--components-button-iconbutton-standard-hover);
47
77
  }
48
78
  .eds-datepicker__calendar__header .eds-icon-button:focus,
49
79
  .eds-contrast .eds-datepicker__calendar__header .eds-icon-button:focus {
50
80
  outline: 2px solid #181c56;
81
+ outline-color: var(--basecolors-stroke-focus-standard);
82
+ outline-offset: 0.125rem;
51
83
  }
52
84
  .eds-datepicker__calendar__header .eds-icon-button:active,
53
85
  .eds-contrast .eds-datepicker__calendar__header .eds-icon-button:active {
54
- background-color: #8285a8;
86
+ background-color: var(--components-button-iconbutton-standard-active);
55
87
  }
56
88
  .eds-datepicker__calendar__header .eds-icon-button--disabled__wrapper,
57
89
  .eds-contrast .eds-datepicker__calendar__header .eds-icon-button--disabled__wrapper {
@@ -67,7 +99,7 @@
67
99
  .eds-datepicker__calendar__grid thead tr th,
68
100
  .eds-contrast .eds-datepicker__calendar__grid__weeknumber,
69
101
  .eds-contrast .eds-datepicker__calendar__grid thead tr th {
70
- color: #54568c;
102
+ color: var(--components-datepicker-calendar-text-subdued);
71
103
  font-size: 0.75rem;
72
104
  }
73
105
  .eds-datepicker__calendar__grid__weeknumber-header, .eds-datepicker__calendar__grid__weeknumber,
@@ -90,7 +122,7 @@
90
122
  .eds-contrast .eds-datepicker__calendar__grid__cell__td {
91
123
  position: relative;
92
124
  padding: 0;
93
- border: 1px solid #e9e9e9;
125
+ border: 1px solid var(--components-datepicker-calendar-dateborder);
94
126
  }
95
127
  .eds-datepicker__calendar__grid__cell__td[focus-within],
96
128
  .eds-contrast .eds-datepicker__calendar__grid__cell__td[focus-within] {
@@ -102,30 +134,34 @@
102
134
  }
103
135
  .eds-datepicker__calendar__grid__cell:hover,
104
136
  .eds-contrast .eds-datepicker__calendar__grid__cell:hover {
105
- background-color: #656782;
106
- color: #ffffff;
137
+ background-color: var(--components-datepicker-calendar-datefill-hover);
138
+ color: var(--components-datepicker-calendar-text-accent);
107
139
  }
108
140
  .eds-datepicker__calendar__grid__cell:active,
109
141
  .eds-contrast .eds-datepicker__calendar__grid__cell:active {
110
- background-color: #8285a8;
142
+ background-color: var(--components-datepicker-calendar-datefill-selected);
143
+ color: var(--components-datepicker-calendar-text-accent);
111
144
  }
112
145
  .eds-datepicker__calendar__grid__cell:focus,
113
146
  .eds-contrast .eds-datepicker__calendar__grid__cell:focus {
114
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
115
- outline: 1px solid #e9e9e9;
147
+ outline: 2px solid #181c56;
148
+ outline-color: var(--basecolors-stroke-focus-standard);
149
+ outline-offset: 0.125rem;
116
150
  }
117
151
  .eds-datepicker__calendar__grid__cell--selected,
118
152
  .eds-contrast .eds-datepicker__calendar__grid__cell--selected {
119
- background-color: #181c56;
120
- color: #ffffff;
153
+ background-color: var(--components-datepicker-calendar-datefill-selected);
154
+ color: var(--components-datepicker-calendar-text-accent);
121
155
  }
122
156
  .eds-datepicker__calendar__grid__cell--selected:hover,
123
157
  .eds-contrast .eds-datepicker__calendar__grid__cell--selected:hover {
124
- background-color: #393d79;
158
+ background-color: var(--components-datepicker-calendar-datefill-hover);
159
+ color: var(--components-datepicker-calendar-text-accent);
125
160
  }
126
161
  .eds-datepicker__calendar__grid__cell--selected:active,
127
162
  .eds-contrast .eds-datepicker__calendar__grid__cell--selected:active {
128
- background-color: #292b6a;
163
+ background-color: var(--components-datepicker-calendar-datefill-selected);
164
+ color: var(--components-datepicker-calendar-text-accent);
129
165
  }
130
166
  .eds-datepicker__calendar__grid__cell--disabled,
131
167
  .eds-contrast .eds-datepicker__calendar__grid__cell--disabled {
@@ -134,7 +170,6 @@
134
170
  .eds-datepicker__calendar__grid__cell--disabled:hover,
135
171
  .eds-contrast .eds-datepicker__calendar__grid__cell--disabled:hover {
136
172
  background-color: transparent;
137
- color: #181c56;
138
173
  cursor: not-allowed;
139
174
  }
140
175
  .eds-datepicker__calendar__grid__cell--outside-month,
@@ -149,34 +184,7 @@
149
184
  }
150
185
  .eds-datepicker__calendar__grid__cell--today,
151
186
  .eds-contrast .eds-datepicker__calendar__grid__cell--today {
152
- border-bottom: 2px solid #ff5959;
153
- }
154
- /* DO NOT CHANGE!*/
155
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
156
- [dir="ltr"] .eds-date-and-time-field__segment {
157
- text-align: right;
158
- }
159
- [dir="rtl"] .eds-date-and-time-field__segment {
160
- text-align: left;
161
- }
162
- .eds-date-and-time-field__segment {
163
- margin-top: 1rem;
164
- padding: 0 2px;
165
- font-feature-settings: "tnum";
166
- font-variant-numeric: tabular-nums;
167
- }
168
- .eds-date-and-time-field__segment--placeholder {
169
- color: #646464;
170
- }
171
- .eds-date-and-time-field__segment--dot-separator {
172
- margin-left: -0.1rem;
173
- margin-right: -0.2rem;
174
- }
175
- .eds-date-and-time-field__segment:focus {
176
- background-color: #656782;
177
- color: #ffffff;
178
- outline: transparent;
179
- border-radius: 0.0625rem;
187
+ border-bottom: 2px solid var(--components-datepicker-calendar-stroke-today);
180
188
  }
181
189
  /* DO NOT CHANGE!*/
182
190
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -193,17 +201,18 @@
193
201
  top: 0.45rem;
194
202
  }
195
203
  .eds-datepicker__open-calendar-button.eds-icon-button {
196
- color: #181c56;
204
+ color: var(--components-datepicker-calendar-icon);
197
205
  }
198
206
  .eds-datepicker__open-calendar-button.eds-icon-button:hover {
199
- background-color: #656782;
200
- color: #ffffff;
207
+ background-color: var(--components-button-iconbutton-standard-hover);
201
208
  }
202
209
  .eds-datepicker__open-calendar-button.eds-icon-button:focus {
203
210
  outline: 2px solid #181c56;
211
+ outline-color: var(--basecolors-stroke-focus-standard);
212
+ outline-offset: 0.125rem;
204
213
  }
205
214
  .eds-datepicker__open-calendar-button.eds-icon-button:active {
206
- background-color: #8285a8;
215
+ background-color: var(--components-button-iconbutton-standard-active);
207
216
  }
208
217
  .eds-datepicker__datefield {
209
218
  padding-right: 4rem;
@@ -240,7 +249,6 @@
240
249
  }
241
250
  .eds-timepicker__wrapper .eds-timepicker__arrowbutton {
242
251
  margin: 0 0.25rem;
243
- color: #181c56;
244
252
  }
245
253
  .eds-timepicker__wrapper .eds-timepicker__arrowbutton--disabled {
246
254
  opacity: 0.5;
@@ -248,13 +256,29 @@
248
256
  visibility: hidden;
249
257
  }
250
258
  .eds-timepicker__wrapper .eds-timepicker__arrowbutton:hover {
251
- background-color: #d1d4e3;
259
+ background-color: var(--components-button-iconbutton-standard-hover);
252
260
  }
253
261
  .eds-timepicker__wrapper .eds-timepicker__arrowbutton:focus {
254
262
  outline: 2px solid #181c56;
263
+ outline-color: var(--basecolors-stroke-focus-standard);
264
+ outline-offset: 0.125rem;
255
265
  }
256
266
  .eds-timepicker__wrapper .eds-timepicker__arrowbutton:active {
257
- background-color: #8285a8;
267
+ background-color: var(--components-button-iconbutton-standard-active);
268
+ }
269
+ .eds-timepicker__wrapper .eds-timepicker__arrowbutton.eds-icon-button {
270
+ color: var(--components-button-iconbutton-standard-text);
271
+ }
272
+ .eds-timepicker__wrapper .eds-timepicker__arrowbutton.eds-icon-button:hover {
273
+ background-color: var(--components-button-iconbutton-standard-hover);
274
+ }
275
+ .eds-timepicker__wrapper .eds-timepicker__arrowbutton.eds-icon-button:focus {
276
+ outline: 2px solid #181c56;
277
+ outline-color: var(--basecolors-stroke-focus-standard);
278
+ outline-offset: 0.125rem;
279
+ }
280
+ .eds-timepicker__wrapper .eds-timepicker__arrowbutton.eds-icon-button:active {
281
+ background-color: var(--components-button-iconbutton-standard-active);
258
282
  }
259
283
  .eds-timepicker__wrapper .eds-timepicker .eds-form-control__prepend,
260
284
  .eds-timepicker__wrapper .eds-timepicker .eds-form-control__append {
@@ -267,6 +291,171 @@
267
291
  position: relative;
268
292
  top: -0.5rem;
269
293
  }
294
+ @import "~@entur/tokens/dist/primitive.css";
295
+ /* DO NOT CHANGE!*/
296
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
297
+ :root {
298
+ --fill-background-contrast-dark: var(--ebony-90);
299
+ --fill-background-contrast-light: var(--lavender-90);
300
+ --fill-background-contrast-lightalt: var(--blue-90);
301
+ --fill-background-contrast-lightalt-2: var(--blue-100);
302
+ --fill-background-overlay-solid: var(--ebony-80);
303
+ --fill-background-overlay-solidalt: var(--ebony-75);
304
+ --fill-background-overlay-transparent: var(--transparent-ebony-alpha15);
305
+ --fill-background-overlay-transparentalt: var(--transparent-ebony-alpha25);
306
+ --fill-background-standard-colorless: var(--white-alpha-0);
307
+ --fill-background-standard-dark: var(--ebony-100);
308
+ --fill-background-standard-light: var(--white-alpha-100);
309
+ --fill-background-subdued-dark: var(--ebony-85);
310
+ --fill-background-subdued-light: var(--blue-30);
311
+ --fill-background-tint-dark: var(--ebony-95);
312
+ --fill-background-tint-light: var(--blue-10);
313
+ --fill-background-tint-neutral: var(--grey-10);
314
+ --fill-background-tint-transparent: var(--transparent-blue-alpha10);
315
+ --fill-boolean-false-contrast: var(--blue-50);
316
+ --fill-boolean-false-dark: var(--transparent-ebony-alpha35);
317
+ --fill-boolean-false-light: var(--grey-60);
318
+ --fill-boolean-true-contrast: var(--mint-40);
319
+ --fill-boolean-true-dark: var(--mint-40);
320
+ --fill-boolean-true-light: var(--mint-60);
321
+ --fill-disabled-light: var(--grey-40);
322
+ --fill-disabled-transparent: var(--transparent-neutral-alpha15);
323
+ --fill-disabled-transparentalt: var(--transparent-neutral-alpha10);
324
+ --fill-information-contrast: var(--sky-30);
325
+ --fill-information-deep: var(--sky-50);
326
+ --fill-information-muted: var(--sky-10);
327
+ --fill-information-tint: var(--sky-20);
328
+ --fill-negative-contrast: var(--coral-40);
329
+ --fill-negative-dark: var(--coral-90);
330
+ --fill-negative-deep: var(--coral-60);
331
+ --fill-negative-muted: var(--coral-20);
332
+ --fill-negative-tint: var(--coral-30);
333
+ --fill-negative-transparent: var(--transparent-coral-alpha20);
334
+ --fill-primary-active-contrast: var(--lavender-50);
335
+ --fill-primary-active-light: var(--lavender-100);
336
+ --fill-primary-default-contrast: var(--lavender-40);
337
+ --fill-primary-default-light: var(--lavender-90);
338
+ --fill-primary-hover-contrast: var(--lavender-30);
339
+ --fill-primary-hover-light: var(--blue-90);
340
+ --fill-secondary-active-contrast: var(--lavender-50);
341
+ --fill-secondary-active-light: var(--lavender-40);
342
+ --fill-secondary-default-colorless: var(--white-alpha-0);
343
+ --fill-secondary-hover-contrast: var(--blue-70);
344
+ --fill-secondary-hover-light: var(--lavender-20);
345
+ --fill-selected-default-contrast: var(--blue-90);
346
+ --fill-selected-default-dark: var(--ebony-10);
347
+ --fill-selected-default-darkalt: var(--ebony-50);
348
+ --fill-selected-default-light: var(--blue-10);
349
+ --fill-selected-default-neutral: var(--grey-30);
350
+ --fill-selected-hover-contrast: var(--blue-80);
351
+ --fill-selected-hover-dark: var(--transparent-ebony-alpha35);
352
+ --fill-selected-hover-light: var(--blue-20);
353
+ --fill-selected-hover-neutral: var(--grey-20);
354
+ --fill-success-contrast: var(--mint-40);
355
+ --fill-success-deep: var(--mint-60);
356
+ --fill-success-muted: var(--mint-20);
357
+ --fill-success-subdued: var(--mint-50);
358
+ --fill-success-tint: var(--mint-30);
359
+ --fill-warning-contrast: var(--canary-40);
360
+ --fill-warning-deep: var(--canary-60);
361
+ --fill-warning-muted: var(--canary-20);
362
+ --fill-warning-tint: var(--canary-30);
363
+ --shape-accent: var(--lavender-90);
364
+ --shape-contrast: var(--lavender-40);
365
+ --shape-dark: var(--ebony-100);
366
+ --shape-darkalt: var(--ebony-30);
367
+ --shape-disabled: var(--grey-80);
368
+ --shape-highlight: var(--coral-40);
369
+ --shape-highlightalt: var(--coral-30);
370
+ --shape-inactive: var(--blue-40);
371
+ --shape-information: var(--sky-50);
372
+ --shape-informationalt: var(--sky-30);
373
+ --shape-light: var(--white-alpha-100);
374
+ --shape-lightalt: var(--ebony-10);
375
+ --shape-negative: var(--coral-60);
376
+ --shape-negativealt: var(--coral-30);
377
+ --shape-neutral: var(--grey-70);
378
+ --shape-neutralalt: var(--grey-50);
379
+ --shape-neutralalt2: var(--grey-60);
380
+ --shape-subdued: var(--blue-70);
381
+ --shape-subduedalt: var(--blue-30);
382
+ --shape-success: var(--mint-60);
383
+ --shape-successalt: var(--mint-40);
384
+ --shape-warning: var(--canary-60);
385
+ --shape-warningalt: var(--canary-40);
386
+ --stroke-accent: var(--lavender-90);
387
+ --stroke-colorless: var(--white-alpha-0);
388
+ --stroke-contrast: var(--lavender-40);
389
+ --stroke-contrastalt: var(--blue-80);
390
+ --stroke-dark: var(--ebony-30);
391
+ --stroke-darkalt: var(--ebony-50);
392
+ --stroke-darkalt-2: var(--ebony-100);
393
+ --stroke-highlight: var(--coral-40);
394
+ --stroke-highlightalt: var(--coral-30);
395
+ --stroke-information: var(--sky-50);
396
+ --stroke-light: var(--white-alpha-100);
397
+ --stroke-lightalt: var(--ebony-10);
398
+ --stroke-negative: var(--coral-60);
399
+ --stroke-negativealt: var(--coral-30);
400
+ --stroke-neutral: var(--grey-30);
401
+ --stroke-neutralalt: var(--grey-60);
402
+ --stroke-subdued: var(--blue-60);
403
+ --stroke-success: var(--mint-60);
404
+ --stroke-successalt: var(--mint-40);
405
+ --stroke-transparent: var(--transparent-blue-alpha40);
406
+ --stroke-transparentalt: var(--transparent-lavender-alpha70);
407
+ --stroke-warning: var(--canary-70);
408
+ --text-accent: var(--lavender-90);
409
+ --text-dark: var(--ebony-100);
410
+ --text-darkalt: var(--ebony-30);
411
+ --text-disabled: var(--grey-80);
412
+ --text-highlight: var(--lavender-40);
413
+ --text-highlightalt: var(--peach-40);
414
+ --text-light: var(--white-alpha-100);
415
+ --text-lightalt: var(--ebony-10);
416
+ --text-negative: var(--coral-60);
417
+ --text-negativealt: var(--coral-30);
418
+ --text-neutral: var(--grey-70);
419
+ --text-neutralalt: var(--grey-50);
420
+ --text-neutralalt2: var(--grey-60);
421
+ --text-subdued: var(--blue-70);
422
+ --text-subduedalt: var(--blue-30);
423
+ --text-success: var(--mint-60);
424
+ --text-successalt: var(--mint-40);
425
+ }
426
+
427
+ /* DO NOT CHANGE!*/
428
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
429
+ [data-color-mode=light],
430
+ :root {
431
+ --components-datepicker-calendar-background: var(--fill-background-standard-light);
432
+ --components-datepicker-calendar-border: var(--stroke-neutral);
433
+ --components-datepicker-calendar-dateborder: var(--stroke-neutral);
434
+ --components-datepicker-calendar-datefill-hover: var(--fill-secondary-hover-light);
435
+ --components-datepicker-calendar-datefill-selected: var(--fill-secondary-active-light);
436
+ --components-datepicker-calendar-icon: var(--shape-accent);
437
+ --components-datepicker-calendar-stroke-today: var(--stroke-highlight);
438
+ --components-datepicker-calendar-text-accent: var(--text-accent);
439
+ --components-datepicker-calendar-text-disabled: var(--text-neutralalt);
440
+ --components-datepicker-calendar-text-subdued: var(--text-subdued);
441
+ }
442
+
443
+ [data-color-mode=dark] {
444
+ --components-datepicker-calendar-background: var(--fill-background-overlay-solid);
445
+ --components-datepicker-calendar-border: var(--stroke-colorless);
446
+ --components-datepicker-calendar-dateborder: var(--stroke-darkalt);
447
+ --components-datepicker-calendar-datefill-hover: var(--fill-selected-hover-dark);
448
+ --components-datepicker-calendar-datefill-selected: var(--fill-background-overlay-transparent);
449
+ --components-datepicker-calendar-icon: var(--shape-lightalt);
450
+ --components-datepicker-calendar-stroke-today: var(--stroke-highlightalt);
451
+ --components-datepicker-calendar-text-accent: var(--text-lightalt);
452
+ --components-datepicker-calendar-text-disabled: var(--text-neutral);
453
+ --components-datepicker-calendar-text-subdued: var(--text-darkalt);
454
+ }
455
+
456
+ :root {
457
+ --eds-datepicker: 1;
458
+ }
270
459
  .eds-simple-timepicker {
271
460
  --input-width: 7rem;
272
461
  width: var(--input-width);
@@ -284,6 +473,3 @@
284
473
  margin-top: -0.2rem;
285
474
  margin-left: -0.5rem;
286
475
  }
287
- :root {
288
- --eds-datepicker: 1;
289
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/datepicker",
3
- "version": "9.3.0",
3
+ "version": "9.3.2",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/datepicker.esm.js",
@@ -27,14 +27,14 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/a11y": "^0.2.76",
31
- "@entur/button": "^3.2.11",
32
- "@entur/form": "^7.0.39",
33
- "@entur/icons": "^6.15.1",
34
- "@entur/modal": "^1.7.32",
35
- "@entur/tokens": "^3.13.0",
36
- "@entur/tooltip": "^2.6.48",
37
- "@entur/typography": "^1.8.24",
30
+ "@entur/a11y": "^0.2.77",
31
+ "@entur/button": "^3.2.13",
32
+ "@entur/form": "^7.0.41",
33
+ "@entur/icons": "^6.15.2",
34
+ "@entur/modal": "^1.7.34",
35
+ "@entur/tokens": "^3.13.1",
36
+ "@entur/tooltip": "^2.6.50",
37
+ "@entur/typography": "^1.8.26",
38
38
  "@entur/utils": "^0.10.0",
39
39
  "@floating-ui/react-dom": "^1.0.0",
40
40
  "@internationalized/date": "^3.4.0",
@@ -48,5 +48,5 @@
48
48
  "classnames": "^2.3.1",
49
49
  "react-focus-lock": "^2.9.1"
50
50
  },
51
- "gitHead": "450b88a0baca11352d329ffa3fcd6c003ec1d338"
51
+ "gitHead": "c36e1121738a702fe5ed92cd3f26636d7a4ef026"
52
52
  }