@sb1/ffe-datepicker 14.2.0 → 15.0.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 (4) hide show
  1. package/css/datepicker.css +55 -24
  2. package/less/calendar.less +17 -13
  3. package/less/dateinput.less +16 -5
  4. package/package.json +4 -4
package/css/datepicker.css CHANGED
@@ -2,7 +2,7 @@
2
2
  --button-width: 40px;
3
3
  --border-width: var(--ffe-g-border-width);
4
4
  --border-color: var(--ffe-color-border-primary-default);
5
- --detail-text-color: var(--ffe-color-component-form-input-foreground-on-fill-subtle);
5
+ --detail-text-color: var(--ffe-color-component-form-input-foreground-subtle);
6
6
  --selected-icon-color: var(--ffe-color-fill-primary-selected-default);
7
7
  --text-color: var(--ffe-color-foreground-default);
8
8
  min-height: 2.8125rem;
@@ -30,10 +30,15 @@
30
30
  box-shadow: 0 0 0 1px var(--ffe-color-border-primary-default-hover);
31
31
  }
32
32
  }
33
+ .ffe-searchable-dropdown:active,
33
34
  .ffe-searchable-dropdown:focus-within {
34
- --border-color: var(--ffe-color-border-interactive-selected);
35
- -webkit-box-shadow: 0 0 0 1px var(--ffe-color-border-interactive-selected);
36
- box-shadow: 0 0 0 1px var(--ffe-color-border-interactive-selected);
35
+ border-color: var(--ffe-color-component-form-input-border-active);
36
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-component-form-input-border-active);
37
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-component-form-input-border-active);
38
+ }
39
+ .ffe-searchable-dropdown:focus-within {
40
+ outline: var(--ffe-g-outline-width) solid var(--ffe-color-border-interactive-focus);
41
+ outline-offset: var(--ffe-g-outline-offset);
37
42
  }
38
43
  .ffe-searchable-dropdown__input {
39
44
  display: grid;
@@ -96,7 +101,7 @@
96
101
  background: var(--ffe-color-surface-primary-default);
97
102
  color: var(--ffe-color-foreground-default);
98
103
  position: absolute;
99
- top: 2px;
104
+ top: var(--ffe-spacing-xs);
100
105
  left: 0;
101
106
  width: 100%;
102
107
  z-index: 1;
@@ -139,6 +144,9 @@
139
144
  background: var(--ffe-color-surface-primary-default-hover);
140
145
  }
141
146
  }
147
+ .ffe-searchable-dropdown__list-item-body:active {
148
+ background: var(--ffe-color-surface-primary-default-pressed);
149
+ }
142
150
  .ffe-searchable-dropdown__list-item-body--highlighted {
143
151
  background: var(--ffe-color-surface-primary-default-hover);
144
152
  }
@@ -154,6 +162,22 @@
154
162
  color: var(--selected-icon-color);
155
163
  visibility: hidden;
156
164
  }
165
+ .ffe-searchable-dropdown:has(input[aria-invalid='true']) {
166
+ color: var(--ffe-color-foreground-feedback-critical);
167
+ border: var(--ffe-g-border-width) solid var(--ffe-color-border-feedback-critical);
168
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
169
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
170
+ background-color: var(--ffe-color-surface-feedback-critical);
171
+ }
172
+ @media (hover: hover) and (pointer: fine) {
173
+ .ffe-searchable-dropdown:has(input[aria-invalid='true']):hover,
174
+ .ffe-searchable-dropdown:has(input[aria-invalid='true']):focus {
175
+ border: var(--ffe-g-border-width) solid var(--ffe-color-border-feedback-critical);
176
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
177
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
178
+ background-color: var(--ffe-color-surface-primary-default);
179
+ }
180
+ }
157
181
  .ffe-searchable-dropdown--multi .ffe-searchable-dropdown__input {
158
182
  display: -webkit-box;
159
183
  display: -ms-flexbox;
@@ -213,9 +237,11 @@
213
237
  width: fit-content;
214
238
  border: var(--ffe-g-border-width) solid var(--ffe-color-border-primary-default);
215
239
  border-radius: var(--ffe-g-border-radius);
216
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
217
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
218
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
240
+ -webkit-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
241
+ transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
242
+ -o-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
243
+ transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
244
+ transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
219
245
  }
220
246
  .ffe-datepicker--full-width {
221
247
  width: 100%;
@@ -247,9 +273,15 @@
247
273
  .ffe-datepicker:focus-within,
248
274
  .ffe-datepicker:has(.ffe-datepicker__button:focus) .ffe-input-field:hover {
249
275
  outline: none;
250
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
251
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
252
- border-color: var(--ffe-color-border-interactive-focus);
276
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-component-form-input-border-active);
277
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-component-form-input-border-active);
278
+ border-color: var(--ffe-color-component-form-input-border-active);
279
+ }
280
+ @media (pointer: fine) {
281
+ .ffe-datepicker:focus-within {
282
+ outline: var(--ffe-g-outline-width) solid var(--ffe-color-border-interactive-focus);
283
+ outline-offset: var(--ffe-g-outline-offset);
284
+ }
253
285
  }
254
286
  .ffe-datepicker__icon.ffe-icons {
255
287
  vertical-align: middle;
@@ -291,7 +323,7 @@
291
323
  min-width: 4ch;
292
324
  }
293
325
  .ffe-datepicker .ffe-dateinput__field:focus {
294
- background-color: var(--ffe-color-surface-secondary-default);
326
+ background-color: var(--ffe-color-fill-primary-subtle);
295
327
  outline: none;
296
328
  }
297
329
  .ffe-datepicker .ffe-dateinput__field::-ms-clear {
@@ -338,7 +370,7 @@
338
370
  .ffe-calendar {
339
371
  border: var(--ffe-g-border-width) solid var(--ffe-color-border-primary-default);
340
372
  border-radius: var(--ffe-g-border-radius);
341
- background: var(--ffe-color-background-default);
373
+ background: var(--ffe-color-component-form-input-fill-default);
342
374
  color: var(--ffe-color-foreground-default);
343
375
  overflow-y: auto;
344
376
  }
@@ -396,8 +428,8 @@
396
428
  padding: 4px;
397
429
  }
398
430
  .ffe-calendar__month-nav:focus-visible {
399
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-emphasis);
400
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-emphasis);
431
+ outline: var(--ffe-g-outline-width) solid var(--ffe-color-border-interactive-focus);
432
+ outline-offset: var(--ffe-g-outline-offset);
401
433
  }
402
434
  .ffe-calendar__icon-prev.ffe-icons,
403
435
  .ffe-calendar__icon-next.ffe-icons {
@@ -458,6 +490,7 @@
458
490
  padding: var(--ffe-spacing-2xs);
459
491
  text-align: center;
460
492
  outline: none;
493
+ border-radius: var(--ffe-g-border-radius-sm);
461
494
  }
462
495
  .ffe-calendar__date {
463
496
  font-family: var(--ffe-g-font);
@@ -482,26 +515,24 @@
482
515
  }
483
516
  @media (hover: hover) and (pointer: fine) {
484
517
  .ffe-calendar__date:hover {
485
- background: var(--ffe-color-fill-neutral-subtle-hover);
518
+ background: var(--ffe-color-component-form-input-fill-default-hover);
486
519
  color: var(--ffe-color-foreground-default);
487
520
  }
488
521
  }
489
522
  .ffe-calendar__date:active {
490
- background: var(--ffe-color-fill-neutral-subtle-pressed);
491
- color: var(--ffe-color-foreground-default);
523
+ background: var(--ffe-color-component-form-input-fill-default-pressed);
524
+ color: var(--ffe-color-component-form-input-foreground-default);
492
525
  }
493
526
  .ffe-calendar__date:focus-visible,
494
527
  .ffe-calendar__date--focus {
495
- border: var(--ffe-g-border-width) solid var(--ffe-color-border-interactive-focus);
496
- outline: none;
528
+ outline: var(--ffe-g-outline-width) solid var(--ffe-color-border-interactive-focus);
529
+ outline-offset: var(--ffe-g-outline-offset);
530
+ background-color: var(--ffe-color-component-form-input-fill-default-hover);
497
531
  }
498
532
  .ffe-calendar__date--selected {
499
533
  background: var(--ffe-color-fill-primary-selected-default);
500
534
  color: var(--ffe-color-foreground-inverse);
501
535
  }
502
- .ffe-calendar__date--selected.ffe-calendar__date--focus {
503
- border-color: var(--ffe-color-border-primary-emphasis);
504
- }
505
536
  @media (hover: hover) and (pointer: fine) {
506
537
  .ffe-calendar__date--selected:hover {
507
538
  background: var(--ffe-color-fill-primary-selected-hover);
@@ -509,7 +540,7 @@
509
540
  }
510
541
  }
511
542
  .ffe-calendar__date--disabled {
512
- color: var(--ffe-color-foreground-subtle);
543
+ color: var(--ffe-color-component-form-input-foreground-disabled);
513
544
  }
514
545
  .ffe-calendar__date--disabled.ffe-calendar__date--selected {
515
546
  background: var(--ffe-color-fill-tertiary-subtle);
package/less/calendar.less CHANGED
@@ -4,7 +4,7 @@
4
4
  border: var(--ffe-g-border-width) solid
5
5
  var(--ffe-color-border-primary-default);
6
6
  border-radius: var(--ffe-g-border-radius);
7
- background: var(--ffe-color-background-default);
7
+ background: var(--ffe-color-component-form-input-fill-default);
8
8
  color: var(--ffe-color-foreground-default);
9
9
  overflow-y: auto;
10
10
 
@@ -58,8 +58,9 @@
58
58
  padding: 4px;
59
59
 
60
60
  &:focus-visible {
61
- box-shadow: var(--ffe-g-border-focus-box-shadow)
62
- var(--ffe-color-border-primary-emphasis);
61
+ outline: var(--ffe-g-outline-width) solid
62
+ var(--ffe-color-border-interactive-focus);
63
+ outline-offset: var(--ffe-g-outline-offset);
63
64
  }
64
65
  }
65
66
 
@@ -89,6 +90,7 @@
89
90
 
90
91
  &__weekday {
91
92
  .ffe-small-text();
93
+
92
94
  color: var(--ffe-color-foreground-subtle);
93
95
  }
94
96
 
@@ -119,6 +121,7 @@
119
121
  padding: var(--ffe-spacing-2xs);
120
122
  text-align: center;
121
123
  outline: none;
124
+ border-radius: var(--ffe-g-border-radius-sm);
122
125
  }
123
126
 
124
127
  &__date {
@@ -141,31 +144,32 @@
141
144
 
142
145
  @media (hover: hover) and (pointer: fine) {
143
146
  &:hover {
144
- background: var(--ffe-color-fill-neutral-subtle-hover);
147
+ background: var(
148
+ --ffe-color-component-form-input-fill-default-hover
149
+ );
145
150
  color: var(--ffe-color-foreground-default);
146
151
  }
147
152
  }
148
153
 
149
154
  &:active {
150
- background: var(--ffe-color-fill-neutral-subtle-pressed);
151
- color: var(--ffe-color-foreground-default);
155
+ background: var(--ffe-color-component-form-input-fill-default-pressed);
156
+ color: var(--ffe-color-component-form-input-foreground-default);
152
157
  }
153
158
 
154
159
  &:focus-visible,
155
160
  &--focus {
156
- border: var(--ffe-g-border-width) solid
161
+ outline: var(--ffe-g-outline-width) solid
157
162
  var(--ffe-color-border-interactive-focus);
158
- outline: none;
163
+ outline-offset: var(--ffe-g-outline-offset);
164
+ background-color: var(
165
+ --ffe-color-component-form-input-fill-default-hover
166
+ );
159
167
  }
160
168
 
161
169
  &--selected {
162
170
  background: var(--ffe-color-fill-primary-selected-default);
163
171
  color: var(--ffe-color-foreground-inverse);
164
172
 
165
- &.ffe-calendar__date--focus {
166
- border-color: var(--ffe-color-border-primary-emphasis);
167
- }
168
-
169
173
  @media (hover: hover) and (pointer: fine) {
170
174
  &:hover {
171
175
  background: var(--ffe-color-fill-primary-selected-hover);
@@ -175,7 +179,7 @@
175
179
  }
176
180
 
177
181
  &--disabled {
178
- color: var(--ffe-color-foreground-subtle);
182
+ color: var(--ffe-color-component-form-input-foreground-disabled);
179
183
 
180
184
  &.ffe-calendar__date--selected {
181
185
  background: var(--ffe-color-fill-tertiary-subtle);
package/less/dateinput.less CHANGED
@@ -11,8 +11,11 @@
11
11
  border: var(--ffe-g-border-width) solid
12
12
  var(--ffe-color-border-primary-default);
13
13
  border-radius: var(--ffe-g-border-radius);
14
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
15
-
14
+ transition:
15
+ color var(--ffe-transition-duration) var(--ffe-ease),
16
+ border var(--ffe-transition-duration) var(--ffe-ease),
17
+ box-shadow var(--ffe-transition-duration) var(--ffe-ease),
18
+ background-color var(--ffe-transition-duration) var(--ffe-ease);
16
19
  &--full-width {
17
20
  width: 100%;
18
21
  }
@@ -46,8 +49,16 @@
46
49
  &:has(&__button:focus) .ffe-input-field:hover {
47
50
  outline: none;
48
51
  box-shadow: var(--ffe-g-border-focus-box-shadow)
49
- var(--ffe-color-border-interactive-focus);
50
- border-color: var(--ffe-color-border-interactive-focus);
52
+ var(--ffe-color-component-form-input-border-active);
53
+ border-color: var(--ffe-color-component-form-input-border-active);
54
+ }
55
+
56
+ @media (pointer: fine) {
57
+ &:focus-within {
58
+ outline: var(--ffe-g-outline-width) solid
59
+ var(--ffe-color-border-interactive-focus);
60
+ outline-offset: var(--ffe-g-outline-offset);
61
+ }
51
62
  }
52
63
 
53
64
  &__icon.ffe-icons {
@@ -89,7 +100,7 @@
89
100
  }
90
101
 
91
102
  &:focus {
92
- background-color: var(--ffe-color-surface-secondary-default);
103
+ background-color: var(--ffe-color-fill-primary-subtle);
93
104
  outline: none;
94
105
  }
95
106
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-datepicker",
3
- "version": "14.2.0",
3
+ "version": "15.0.0",
4
4
  "description": "FFE Datepicker",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -20,8 +20,8 @@
20
20
  "build": "lessc less/datepicker.less css/datepicker.css --autoprefix"
21
21
  },
22
22
  "dependencies": {
23
- "@sb1/ffe-core": "^32.0.5",
24
- "@sb1/ffe-form": "^32.1.10"
23
+ "@sb1/ffe-core": "^33.0.0",
24
+ "@sb1/ffe-form": "^33.0.0"
25
25
  },
26
26
  "devDependencies": {
27
27
  "@sb1/ffe-buildtool": "^0.10.1"
@@ -29,5 +29,5 @@
29
29
  "publishConfig": {
30
30
  "access": "public"
31
31
  },
32
- "gitHead": "41e3caf4581c7e2cf0b8f09f5eeb931eb90dae13"
32
+ "gitHead": "0f26027df58d561ce8d5310c91033c5e62e50f51"
33
33
  }