@itcase/ui 1.8.3 → 1.8.4

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.
@@ -79,7 +79,7 @@ var chipsAppearanceSurface = {
79
79
  fill: 'surfacePrimary',
80
80
  fillActive: 'accentPrimary',
81
81
  fillActiveHover: 'accentSecondary',
82
- fillHover: 'surfacePrimaryHover',
82
+ fillHover: 'surfaceHover',
83
83
  labelTextActiveColor: 'accentTextPrimary',
84
84
  labelTextColor: 'surfaceTextPrimary',
85
85
  labelTextHoverColor: 'surfaceTextPrimary',
@@ -87,13 +87,13 @@ var chipsAppearanceSurface = {
87
87
  },
88
88
  surfaceSecondary: {
89
89
  fill: 'surfaceSecondary',
90
- fillHover: 'surfaceSecondaryHover',
90
+ fillHover: 'surfaceHover',
91
91
  labelTextColor: 'surfaceTextPrimary',
92
92
  borderColor: 'surfaceBorderSecondary',
93
93
  },
94
94
  surfaceTertiary: {
95
95
  fill: 'surfaceTertiary',
96
- fillHover: 'surfaceTertiaryHover',
96
+ fillHover: 'surfaceHover',
97
97
  labelTextColor: 'surfaceTextPrimary',
98
98
  borderColor: 'surfaceBorderTertiary',
99
99
  },
@@ -72,7 +72,7 @@ var choiceAppearanceStyle = {
72
72
 
73
73
  var choiceAppearanceSurface = {
74
74
  surfacePrimary: {
75
- fill: 'accentPrimary',
75
+ fill: 'surfacePrimary',
76
76
  fillItem: 'surfaceItemInverse',
77
77
  fillItemActive: 'surfaceItemSecondary',
78
78
  fillItemActiveHover: 'surfaceItemTertiary',
@@ -13,7 +13,6 @@ var Icon = require('../../Icon_cjs_DSzfNqif.js');
13
13
  var Input = require('../../Input_cjs_DkQh0Utd.js');
14
14
  var Label = require('../../Label_cjs_BCjB-mxC.js');
15
15
  var Text = require('../../Text_cjs_D4xG0cKD.js');
16
- var _default = require('@itcase/icons/default');
17
16
  require('lodash/camelCase');
18
17
  require('lodash/castArray');
19
18
  require('lodash/upperFirst');
@@ -32,19 +31,20 @@ require('react-inlinesvg');
32
31
  require('../../Tooltip_cjs_CTwksdFk.js');
33
32
  require('../../Title_cjs_iuyln-ab.js');
34
33
 
34
+ // import { icon14, icon16 } from '@itcase/icons/default'
35
35
  var datePickerSize = {
36
36
  sizeS: {
37
37
  datePickerProps: {
38
38
  daySize: 'xs',
39
39
  dayTextSize: 'm',
40
40
  iconFillSize: 24,
41
- iconLeft: _default.icon14.ChevronLeft,
42
- iconRight: _default.icon14.ChevronRight,
41
+ // iconLeft: icon14.ChevronLeft,
42
+ // iconRight: icon14.ChevronRight,
43
43
  },
44
44
  inputProps: {
45
45
  size: 's',
46
46
  textSize: 's',
47
- clearIcon: _default.icon14.Clear,
47
+ // clearIcon: icon14.Clear,
48
48
  clearIconSize: 16,
49
49
  clearLabelTextSize: 'm',
50
50
  },
@@ -54,13 +54,13 @@ var datePickerSize = {
54
54
  daySize: 'xs',
55
55
  dayTextSize: 'm',
56
56
  iconFillSize: 24,
57
- iconLeft: _default.icon14.ChevronLeft,
58
- iconRight: _default.icon14.ChevronRight,
57
+ // iconLeft: icon14.ChevronLeft,
58
+ // iconRight: icon14.ChevronRight,
59
59
  },
60
60
  inputProps: {
61
61
  size: 'm',
62
62
  textSize: 'm',
63
- clearIcon: _default.icon14.Clear,
63
+ // clearIcon: icon14.Clear,
64
64
  clearIconSize: 16,
65
65
  clearLabelTextSize: 'm',
66
66
  },
@@ -70,13 +70,13 @@ var datePickerSize = {
70
70
  daySize: 'xs',
71
71
  dayTextSize: 'm',
72
72
  iconFillSize: 24,
73
- iconLeft: _default.icon14.ChevronLeft,
74
- iconRight: _default.icon14.ChevronRight,
73
+ // iconLeft: icon14.ChevronLeft,
74
+ // iconRight: icon14.ChevronRight,
75
75
  },
76
76
  inputProps: {
77
77
  size: 'l',
78
78
  textSize: 'l',
79
- clearIcon: _default.icon14.Clear,
79
+ // clearIcon: icon14.Clear,
80
80
  clearIconSize: 16,
81
81
  clearLabelTextSize: 'm',
82
82
  },
@@ -77,7 +77,7 @@ var chipsAppearanceSurface = {
77
77
  fill: 'surfacePrimary',
78
78
  fillActive: 'accentPrimary',
79
79
  fillActiveHover: 'accentSecondary',
80
- fillHover: 'surfacePrimaryHover',
80
+ fillHover: 'surfaceHover',
81
81
  labelTextActiveColor: 'accentTextPrimary',
82
82
  labelTextColor: 'surfaceTextPrimary',
83
83
  labelTextHoverColor: 'surfaceTextPrimary',
@@ -85,13 +85,13 @@ var chipsAppearanceSurface = {
85
85
  },
86
86
  surfaceSecondary: {
87
87
  fill: 'surfaceSecondary',
88
- fillHover: 'surfaceSecondaryHover',
88
+ fillHover: 'surfaceHover',
89
89
  labelTextColor: 'surfaceTextPrimary',
90
90
  borderColor: 'surfaceBorderSecondary',
91
91
  },
92
92
  surfaceTertiary: {
93
93
  fill: 'surfaceTertiary',
94
- fillHover: 'surfaceTertiaryHover',
94
+ fillHover: 'surfaceHover',
95
95
  labelTextColor: 'surfaceTextPrimary',
96
96
  borderColor: 'surfaceBorderTertiary',
97
97
  },
@@ -70,7 +70,7 @@ var choiceAppearanceStyle = {
70
70
 
71
71
  var choiceAppearanceSurface = {
72
72
  surfacePrimary: {
73
- fill: 'accentPrimary',
73
+ fill: 'surfacePrimary',
74
74
  fillItem: 'surfaceItemInverse',
75
75
  fillItemActive: 'surfaceItemSecondary',
76
76
  fillItemActiveHover: 'surfaceItemTertiary',
@@ -11,7 +11,6 @@ import { I as Icon } from '../Icon_es_BBmoZ7_3.js';
11
11
  import { I as Input } from '../Input_es_Bs0gEq3L.js';
12
12
  import { L as Label } from '../Label_es_CZpanSdR.js';
13
13
  import { T as Text } from '../Text_es_FJGduy7Z.js';
14
- import { icon14 } from '@itcase/icons/default';
15
14
  import 'lodash/camelCase';
16
15
  import 'lodash/castArray';
17
16
  import 'lodash/upperFirst';
@@ -30,19 +29,20 @@ import 'react-inlinesvg';
30
29
  import '../Tooltip_es_H976MIb7.js';
31
30
  import '../Title_es_ke3YylFm.js';
32
31
 
32
+ // import { icon14, icon16 } from '@itcase/icons/default'
33
33
  var datePickerSize = {
34
34
  sizeS: {
35
35
  datePickerProps: {
36
36
  daySize: 'xs',
37
37
  dayTextSize: 'm',
38
38
  iconFillSize: 24,
39
- iconLeft: icon14.ChevronLeft,
40
- iconRight: icon14.ChevronRight,
39
+ // iconLeft: icon14.ChevronLeft,
40
+ // iconRight: icon14.ChevronRight,
41
41
  },
42
42
  inputProps: {
43
43
  size: 's',
44
44
  textSize: 's',
45
- clearIcon: icon14.Clear,
45
+ // clearIcon: icon14.Clear,
46
46
  clearIconSize: 16,
47
47
  clearLabelTextSize: 'm',
48
48
  },
@@ -52,13 +52,13 @@ var datePickerSize = {
52
52
  daySize: 'xs',
53
53
  dayTextSize: 'm',
54
54
  iconFillSize: 24,
55
- iconLeft: icon14.ChevronLeft,
56
- iconRight: icon14.ChevronRight,
55
+ // iconLeft: icon14.ChevronLeft,
56
+ // iconRight: icon14.ChevronRight,
57
57
  },
58
58
  inputProps: {
59
59
  size: 'm',
60
60
  textSize: 'm',
61
- clearIcon: icon14.Clear,
61
+ // clearIcon: icon14.Clear,
62
62
  clearIconSize: 16,
63
63
  clearLabelTextSize: 'm',
64
64
  },
@@ -68,13 +68,13 @@ var datePickerSize = {
68
68
  daySize: 'xs',
69
69
  dayTextSize: 'm',
70
70
  iconFillSize: 24,
71
- iconLeft: icon14.ChevronLeft,
72
- iconRight: icon14.ChevronRight,
71
+ // iconLeft: icon14.ChevronLeft,
72
+ // iconRight: icon14.ChevronRight,
73
73
  },
74
74
  inputProps: {
75
75
  size: 'l',
76
76
  textSize: 'l',
77
- clearIcon: icon14.Clear,
77
+ // clearIcon: icon14.Clear,
78
78
  clearIconSize: 16,
79
79
  clearLabelTextSize: 'm',
80
80
  },
@@ -18,7 +18,7 @@
18
18
  animation-name: cookieMessageClose;
19
19
  }
20
20
  &__inner {
21
- background: var(--color-surface-primary);
21
+ background: var(--color-surface-fill-primary);
22
22
  padding: 32px;
23
23
  position: relative;
24
24
  @media (--mobile) {
@@ -1287,7 +1287,7 @@ h2.react-datepicker__current-month {
1287
1287
  }
1288
1288
  :root {
1289
1289
  --date-picker-padding: 24px 12px;
1290
- --date-picker-fill: var(--color-surface-primary);
1290
+ --date-picker-fill: var(--color-surface-fill-primary);
1291
1291
  --date-picker-box-shadow: 0px 4px 24px 0px rgb(0, 0, 0, 0.2);
1292
1292
  --date-picker-border-radius: 12px;
1293
1293
  --date-picker-border: solid 1px var(--color-surface-tertiary);
@@ -1336,7 +1336,7 @@ h2.react-datepicker__current-month {
1336
1336
  --date-picker-day-range-start-border-radius: 12px 0 0 12px;
1337
1337
  --date-picker-day-range-end-border-radius: 0 12px 12px 0;
1338
1338
 
1339
- --date-picker-day-weekend-background: var(--color-surface-primary);
1339
+ --date-picker-day-weekend-background: var(--color-surface-fill-primary);
1340
1340
  --date-picker-day-weekend-text-color: var(--color-secondary-text-secondary);
1341
1341
  --date-picker-day-weekend-outside-text-color: var(
1342
1342
  --color-secondary-text-disabled
@@ -1349,6 +1349,6 @@ h2.react-datepicker__current-month {
1349
1349
  --date-picker-day-selected-text-color: var(--color-accent-text-primary);
1350
1350
  --date-picker-day-selected-text-hover-color: var(--color-accent-text-primary);
1351
1351
 
1352
- --date-picker-day-outside-background: var(--color-surface-primary);
1352
+ --date-picker-day-outside-background: var(--color-surface-fill-primary);
1353
1353
  --date-picker-day-outside-text-color: var(--color-surface-text-tertiary);
1354
1354
  }
@@ -50,7 +50,7 @@
50
50
  &-$(color) {
51
51
  & svg {
52
52
  stroke: none;
53
- fill: var(--color-$(type)-$(color));
53
+ fill: var(--color-$(type)-fill-$(color));
54
54
  }
55
55
  }
56
56
  }
@@ -1,10 +1,7 @@
1
1
  .modal-sheet-bottom {
2
2
  position: relative;
3
3
  &__container {
4
- background-color: var(
5
- --modal-sheet-bottom-container-background,
6
- var(--color-surface-primary)
7
- ) !important;
4
+ background-color: var(--modal-sheet-bottom-container-background) !important;
8
5
  border-radius: var(--modal-sheet-bottom-container-border-radius) !important;
9
6
  }
10
7
  &__header {
@@ -35,8 +32,8 @@
35
32
  }
36
33
  }
37
34
  :root {
38
- --modal-sheet-bottom-container-background: none;
39
35
  --modal-sheet-bottom-container-border-radius: 0;
40
36
  --modal-sheet-bottom-header-grabber: none;
41
37
  --modal-sheet-bottom-backdrop: 0;
38
+ --modal-sheet-bottom-container-background: var(--color-surface-fill-primary);
42
39
  }
@@ -76,7 +76,7 @@
76
76
  &_set {
77
77
  &_toast {
78
78
  width: 100%;
79
- background: var(--color-surface-primary);
79
+ background: var(--color-surface-fill-primary);
80
80
  border-radius: var(--notification-item-set-toast-border-radius);
81
81
  display: flex;
82
82
  flex-direction: column;
@@ -2,7 +2,7 @@
2
2
  &_set {
3
3
  &_toast {
4
4
  width: 100%;
5
- background: var(--color-surface-primary);
5
+ background: var(--color-surface-fill-primary);
6
6
  border-radius: var(--notification-item-set-toast-border-radius);
7
7
  display: flex;
8
8
  flex-direction: column;
@@ -19,7 +19,7 @@
19
19
  }
20
20
  }
21
21
  &__input {
22
- background: var(--color-surface-primary);
22
+ background: var(--color-surface-fill-primary);
23
23
  border: solid 1px
24
24
  var(--pagination-input-color, --color-surface-border-tertiary);
25
25
  border-radius: 8px;
@@ -130,8 +130,8 @@
130
130
 
131
131
  --paginator-item-transition: all 0.2s ease 0s;
132
132
 
133
- --paginator-item-default-fill: var(--color-surface-primary);
134
- --paginator-item-default-fill-hover: var(--color-surface-primary-hover);
133
+ --paginator-item-default-fill: var(--color-surface-fill-primary);
134
+ --paginator-item-default-fill-hover: var(--color-surface-hover);
135
135
  --paginator-item-default-text: var(--color-surface-text-primary);
136
136
 
137
137
  --paginator-item-active-fill: var(--color-accent-primary);
@@ -317,7 +317,7 @@
317
317
  accent, disabled, hover {
318
318
  &-$(color) {
319
319
  & .rc-slider-rail {
320
- background: var(--color-$(type)-$(color));
320
+ background: var(--color-$(type)-fill-$(color));
321
321
  }
322
322
  }
323
323
  }
@@ -117,7 +117,7 @@
117
117
  @each $color in primary, secondary, tertiary, quaternary, quinary,
118
118
  senary, accent, disabled, hover {
119
119
  &-$(color) {
120
- background: var(--color-$(type)-$(color));
120
+ background: var(--color-$(type)-fill-$(color));
121
121
  }
122
122
  }
123
123
  }
@@ -220,7 +220,7 @@
220
220
  .select {
221
221
  &__menu {
222
222
  width: 100%;
223
- background: var(--color-surface-primary);
223
+ background: var(--color-surface-fill-primary);
224
224
  padding: 12px 0;
225
225
  margin: var(--select-menu-margin);
226
226
  border-radius: var(--select-menu-border-radius);
@@ -385,11 +385,16 @@
385
385
  --select-menu-border-radius: 12px;
386
386
  --select-menu-margin: 0;
387
387
 
388
- --select-multi-value-padding: 2px 6px;
389
-
390
388
  --select-control-shape-rounded: 8px;
391
389
 
392
- --select-success-border: var(--color-surface-border-tertiary);
390
+ --select-background: var(--color-surface-fill-primary);
391
+ --select-background-hover: var(--color-surface-fill-hover);
392
+ --select-focus-background: var(--color-surface-fill-primary);
393
+ --select-focus-border: var(--color-surface-border-quaternary);
394
+ --select-success-border: var(--color-success-border-secondary);
395
+ --select-success-border-hover: var(--color-surface-border-quaternary);
396
+ --select-error-border: var(--color-error-border-secondary);
397
+ --select-error-hover: var(--color-error-border-secondary);
393
398
 
394
399
  --select-menu-list-item-xxl-padding: 18px 25px;
395
400
  --select-menu-list-item-xl-padding: 14px 20px;
@@ -398,5 +403,6 @@
398
403
  --select-menu-list-item-s-padding: 6px 10px;
399
404
  --select-menu-list-item-xs-padding: 2px 8px;
400
405
 
406
+ --select-multi-value-padding: 2px 6px;
401
407
  --select-multi-value-border-radius: 0;
402
408
  }
@@ -7,7 +7,7 @@
7
7
  @each $color in primary, secondary, tertiary, quaternary, quinary,
8
8
  senary, accent, disabled, hover {
9
9
  &-$(color) {
10
- background: var(--color-$(type)-$(color));
10
+ background: var(--color-$(type)-fill-$(color));
11
11
  }
12
12
  }
13
13
  }
@@ -1,7 +1,7 @@
1
1
  .select {
2
2
  &__menu {
3
3
  width: 100%;
4
- background: var(--color-surface-primary);
4
+ background: var(--color-surface-fill-primary);
5
5
  padding: 12px 0;
6
6
  margin: var(--select-menu-margin);
7
7
  border-radius: var(--select-menu-border-radius);
@@ -163,7 +163,7 @@
163
163
  --tooltip-arrow-height: 14px;
164
164
  --tooltip-arrow-radius: 2px;
165
165
 
166
- --tooltip-arrow-color: var(--color-surface-primary);
166
+ --tooltip-arrow-color: var(--color-surface-fill-primary);
167
167
  --tooltip-shape-rounded-default: 0;
168
168
 
169
169
  /* Size */
@@ -1,10 +1,12 @@
1
1
  .hover-fill-color {
2
- @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning {
3
- &_$(type) {
4
- @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover {
2
+ @each $type in accent, primary, secondary, tertiary, quaternary, surface,
3
+ error, success, warning, info, danger, gradient, disabled, hover, inverse {
4
+ @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
5
+ hover, inverse {
6
+ &_$(type) {
5
7
  &-$(color) {
6
8
  &:hover {
7
- background: var(--color-$(type)-$(color));
9
+ background: var(--color-$(type)-fill-$(color));
8
10
  }
9
11
  }
10
12
  }
@@ -1,8 +1,10 @@
1
1
  .hover-item-color {
2
- @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning {
3
- &_$(type) {
4
- &-item {
5
- @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover {
2
+ @each $type in accent, primary, secondary, tertiary, quaternary, surface,
3
+ error, success, warning, info, danger, gradient, disabled, hover, inverse {
4
+ @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
5
+ hover, inverse {
6
+ &_$(type) {
7
+ &-item {
6
8
  &-$(color) {
7
9
  &:hover {
8
10
  color: var(--color-$(type)-item-$(color));
@@ -1,8 +1,10 @@
1
1
  .hover-text-color {
2
- @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning {
3
- &_$(type) {
4
- &-text {
5
- @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover {
2
+ @each $type in accent, primary, secondary, tertiary, quaternary, surface,
3
+ error, success, warning, info, danger, gradient, disabled, hover, inverse {
4
+ @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
5
+ hover, inverse {
6
+ &_$(type) {
7
+ &-text {
6
8
  &-$(color) {
7
9
  &:hover {
8
10
  color: var(--color-$(type)-text-$(color));
@@ -27,13 +27,10 @@ export declare const datePickerAppearance: {
27
27
  daySize: string;
28
28
  dayTextSize: string;
29
29
  iconFillSize: number;
30
- iconLeft: any;
31
- iconRight: any;
32
30
  };
33
31
  inputProps: {
34
32
  size: string;
35
33
  textSize: string;
36
- clearIcon: any;
37
34
  clearIconSize: number;
38
35
  clearLabelTextSize: string;
39
36
  };
@@ -43,13 +40,10 @@ export declare const datePickerAppearance: {
43
40
  daySize: string;
44
41
  dayTextSize: string;
45
42
  iconFillSize: number;
46
- iconLeft: any;
47
- iconRight: any;
48
43
  };
49
44
  inputProps: {
50
45
  size: string;
51
46
  textSize: string;
52
- clearIcon: any;
53
47
  clearIconSize: number;
54
48
  clearLabelTextSize: string;
55
49
  };
@@ -59,13 +53,10 @@ export declare const datePickerAppearance: {
59
53
  daySize: string;
60
54
  dayTextSize: string;
61
55
  iconFillSize: number;
62
- iconLeft: any;
63
- iconRight: any;
64
56
  };
65
57
  inputProps: {
66
58
  size: string;
67
59
  textSize: string;
68
- clearIcon: any;
69
60
  clearIconSize: number;
70
61
  clearLabelTextSize: string;
71
62
  };
@@ -4,13 +4,10 @@ declare const datePickerSize: {
4
4
  daySize: string;
5
5
  dayTextSize: string;
6
6
  iconFillSize: number;
7
- iconLeft: any;
8
- iconRight: any;
9
7
  };
10
8
  inputProps: {
11
9
  size: string;
12
10
  textSize: string;
13
- clearIcon: any;
14
11
  clearIconSize: number;
15
12
  clearLabelTextSize: string;
16
13
  };
@@ -20,13 +17,10 @@ declare const datePickerSize: {
20
17
  daySize: string;
21
18
  dayTextSize: string;
22
19
  iconFillSize: number;
23
- iconLeft: any;
24
- iconRight: any;
25
20
  };
26
21
  inputProps: {
27
22
  size: string;
28
23
  textSize: string;
29
- clearIcon: any;
30
24
  clearIconSize: number;
31
25
  clearLabelTextSize: string;
32
26
  };
@@ -36,13 +30,10 @@ declare const datePickerSize: {
36
30
  daySize: string;
37
31
  dayTextSize: string;
38
32
  iconFillSize: number;
39
- iconLeft: any;
40
- iconRight: any;
41
33
  };
42
34
  inputProps: {
43
35
  size: string;
44
36
  textSize: string;
45
- clearIcon: any;
46
37
  clearIconSize: number;
47
38
  clearLabelTextSize: string;
48
39
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.8.3",
3
+ "version": "1.8.4",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",