@semcore/time-picker 3.2.19 → 3.3.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 (6) hide show
  1. package/CHANGELOG.md +3 -3
  2. package/lib/cjs/TimePicker.js +13 -13
  3. package/lib/cjs/style/time-picker.shadow.css +23 -23
  4. package/lib/es6/TimePicker.js +13 -13
  5. package/lib/es6/style/time-picker.shadow.css +23 -23
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
- ## [3.2.19] - 2022-12-09
5
+ ## [3.3.0] - 2022-12-12
6
6
 
7
- ### Changed
7
+ ### Added
8
8
 
9
- - Version patch update due to children dependencies update (`@semcore/select` [3.2.19 ~> 3.2.20]).
9
+ - Design tokens based theming.
10
10
 
11
11
  ## [3.2.4] - 2022-10-30
12
12
 
package/lib/cjs/TimePicker.js CHANGED
@@ -59,22 +59,22 @@ var style = (
59
59
  /*__reshadow_css_start__*/
60
60
  _core.sstyled.insert(
61
61
  /*__inner_css_start__*/
62
- ".___STimePicker_1qlsu_gg_{position:relative;width:auto}.___STimePicker_1qlsu_gg_.__disabled_1qlsu_gg_{color:rgba(25,27,35,.3);cursor:default}.___SPickerInput_1qlsu_gg_{box-sizing:content-box;text-align:center;z-index:1}.___SPickerInput_1qlsu_gg_.__placeholder_1qlsu_gg_{text-overflow:clip}.___SPickerInput_1qlsu_gg_._size_m_1qlsu_gg_{width:19px}.___SPickerInput_1qlsu_gg_._size_l_1qlsu_gg_{width:21px}.___SPickerFormat_1qlsu_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:500;line-height:normal;text-decoration:none;align-items:center;border:1px solid #c4c7cf;border-radius:0 6px 6px 0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#6c6e79;background-color:rgba(138,142,155,.1)}.___SPickerFormat_1qlsu_gg_:hover{color:#6c6e79;background-color:rgba(138,142,155,.2)}.___SPickerFormat_1qlsu_gg_:active,.___SPickerFormat_1qlsu_gg_.__active_1qlsu_gg_{color:#6c6e79;background-color:rgba(138,142,155,.3)}.___SPickerFormat_1qlsu_gg_._size_m_1qlsu_gg_{height:28px;font-size:14px;margin:0 -1px 0 0}.___SPickerFormat_1qlsu_gg_._size_m_1qlsu_gg_ .___SPickerFormatText_1qlsu_gg_{margin:0 8px}.___SPickerFormat_1qlsu_gg_._size_l_1qlsu_gg_{height:40px;font-size:16px;margin:0 -4px 0 0}.___SPickerFormat_1qlsu_gg_._size_l_1qlsu_gg_ .___SPickerFormatText_1qlsu_gg_{margin:0 12px}.___SPickerFormat_1qlsu_gg_.__disabled_1qlsu_gg_{opacity:0.3;cursor:default;pointer-events:none;border-color:transparent transparent transparent #c4c7cf}.___SPickerFormat_1qlsu_gg_.__keyboardFocused_1qlsu_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}.___STimePickerSeparator_1qlsu_gg_.__disabled_1qlsu_gg_{opacity:0.3;pointer-events:none}"
62
+ ".___STimePicker_cebeg_gg_{position:relative;width:auto}.___STimePicker_cebeg_gg_.__disabled_cebeg_gg_{color:var(--intergalactic-text-secondary,#6c6e79);cursor:default}.___SPickerInput_cebeg_gg_{box-sizing:content-box;text-align:center;z-index:1}.___SPickerInput_cebeg_gg_.__placeholder_cebeg_gg_{text-overflow:clip}.___SPickerInput_cebeg_gg_._size_m_cebeg_gg_{width:19px}.___SPickerInput_cebeg_gg_._size_l_cebeg_gg_{width:21px}.___SPickerFormat_cebeg_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:var(--intergalactic-medium,500);line-height:normal;text-decoration:none;align-items:center;border:1px solid var(--intergalactic-border-primary,#c4c7cf);border-radius:0 var(--intergalactic-rounded-medium,6px) var(--intergalactic-rounded-medium,6px) 0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--intergalactic-text-secondary,#6c6e79);background-color:var(--intergalactic-bg-secondary-neutral,#f4f5f9)}.___SPickerFormat_cebeg_gg_:hover{color:var(--intergalactic-text-secondary,#6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-hover,#e0e1e9)}.___SPickerFormat_cebeg_gg_:active,.___SPickerFormat_cebeg_gg_.__active_cebeg_gg_{color:var(--intergalactic-text-secondary,#6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-active,#c4c7cf)}.___SPickerFormat_cebeg_gg_._size_m_cebeg_gg_{height:var(--intergalactic-form-control-m,28px);font-size:var(--intergalactic-fs-200,14px);margin:0 -1px 0 0}.___SPickerFormat_cebeg_gg_._size_m_cebeg_gg_ .___SPickerFormatText_cebeg_gg_{margin:0 var(--intergalactic-spacing-2x,8px)}.___SPickerFormat_cebeg_gg_._size_l_cebeg_gg_{height:var(--intergalactic-form-control-l,40px);font-size:var(--intergalactic-fs-300,16px);margin:0 calc(var(--intergalactic-spacing-1x, 4px)*-1) 0 0}.___SPickerFormat_cebeg_gg_._size_l_cebeg_gg_ .___SPickerFormatText_cebeg_gg_{margin:0 var(--intergalactic-spacing-3x,12px)}.___SPickerFormat_cebeg_gg_.__disabled_cebeg_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none;border-color:transparent transparent transparent var(--intergalactic-border-primary,#c4c7cf)}.___SPickerFormat_cebeg_gg_.__keyboardFocused_cebeg_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___STimePickerSeparator_cebeg_gg_.__disabled_cebeg_gg_{opacity:var(--intergalactic-disabled-opacity,.3);pointer-events:none}"
63
63
  /*__inner_css_end__*/
64
- , "1qlsu_gg_")
64
+ , "cebeg_gg_")
65
65
  /*__reshadow_css_end__*/
66
66
  , {
67
- "__STimePicker": "___STimePicker_1qlsu_gg_",
68
- "_disabled": "__disabled_1qlsu_gg_",
69
- "__SPickerInput": "___SPickerInput_1qlsu_gg_",
70
- "_placeholder": "__placeholder_1qlsu_gg_",
71
- "_size_m": "_size_m_1qlsu_gg_",
72
- "_size_l": "_size_l_1qlsu_gg_",
73
- "__SPickerFormat": "___SPickerFormat_1qlsu_gg_",
74
- "_active": "__active_1qlsu_gg_",
75
- "__SPickerFormatText": "___SPickerFormatText_1qlsu_gg_",
76
- "_keyboardFocused": "__keyboardFocused_1qlsu_gg_",
77
- "__STimePickerSeparator": "___STimePickerSeparator_1qlsu_gg_"
67
+ "__STimePicker": "___STimePicker_cebeg_gg_",
68
+ "_disabled": "__disabled_cebeg_gg_",
69
+ "__SPickerInput": "___SPickerInput_cebeg_gg_",
70
+ "_placeholder": "__placeholder_cebeg_gg_",
71
+ "_size_m": "_size_m_cebeg_gg_",
72
+ "_size_l": "_size_l_cebeg_gg_",
73
+ "__SPickerFormat": "___SPickerFormat_cebeg_gg_",
74
+ "_active": "__active_cebeg_gg_",
75
+ "__SPickerFormatText": "___SPickerFormatText_cebeg_gg_",
76
+ "_keyboardFocused": "__keyboardFocused_cebeg_gg_",
77
+ "__STimePickerSeparator": "___STimePickerSeparator_cebeg_gg_"
78
78
  });
79
79
  var MAP_MERIDIEM = {
80
80
  AM: 'PM',
package/lib/cjs/style/time-picker.shadow.css CHANGED
@@ -1,12 +1,10 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  STimePicker {
4
2
  position: relative;
5
3
  width: auto;
6
4
  }
7
5
 
8
6
  STimePicker[disabled] {
9
- color: color-mod(var(--gray-800) a(30%));
7
+ color: var(--intergalactic-text-secondary, #6c6e79);
10
8
  cursor: default;
11
9
  }
12
10
 
@@ -35,12 +33,13 @@ SPickerFormat {
35
33
  padding: 0;
36
34
  white-space: nowrap;
37
35
  font-family: inherit;
38
- font-weight: 500;
36
+ font-weight: var(--intergalactic-medium, 500);
39
37
  line-height: normal;
40
38
  text-decoration: none;
41
39
  align-items: center;
42
- border: 1px solid var(--gray-200);
43
- border-radius: 0 var(--rounded-m) var(--rounded-m) 0;
40
+ border: 1px solid var(--intergalactic-border-primary, #c4c7cf);
41
+ border-radius: 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px)
42
+ 0;
44
43
  outline: 0;
45
44
  box-shadow: none;
46
45
  cursor: pointer;
@@ -49,51 +48,52 @@ SPickerFormat {
49
48
  user-select: none;
50
49
  touch-action: manipulation;
51
50
  -webkit-tap-highlight-color: transparent;
52
- color: var(--gray-500);
53
- background-color: color-mod(var(--gray-400) a(10%));
51
+ color: var(--intergalactic-text-secondary, #6c6e79);
52
+ background-color: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
54
53
 
55
54
  &:hover {
56
- color: var(--gray-500);
57
- background-color: color-mod(var(--gray-400) a(20%));
55
+ color: var(--intergalactic-text-secondary, #6c6e79);
56
+ background-color: var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9);
58
57
  }
59
58
 
60
59
  &:active,
61
60
  &[active] {
62
- color: var(--gray-500);
63
- background-color: color-mod(var(--gray-400) a(30%));
61
+ color: var(--intergalactic-text-secondary, #6c6e79);
62
+ background-color: var(--intergalactic-bg-secondary-neutral-active, #c4c7cf);
64
63
  }
65
64
  }
66
65
 
67
66
  SPickerFormat[size='m'] {
68
- height: var(--form-control-m);
69
- font-size: var(--fs-200);
67
+ height: var(--intergalactic-form-control-m, 28px);
68
+ font-size: var(--intergalactic-fs-200, 14px);
69
+ /* disable-tokens-validator */
70
70
  margin: 0 -1px 0 0;
71
71
  & SPickerFormatText {
72
- margin: 0 8px;
72
+ margin: 0 var(--intergalactic-spacing-2x, 8px);
73
73
  }
74
74
  }
75
75
 
76
76
  SPickerFormat[size='l'] {
77
- height: var(--form-control-l);
78
- font-size: var(--fs-300);
79
- margin: 0 -4px 0 0;
77
+ height: var(--intergalactic-form-control-l, 40px);
78
+ font-size: var(--intergalactic-fs-300, 16px);
79
+ margin: 0 calc(-1 * var(--intergalactic-spacing-1x, 4px)) 0 0;
80
80
  & SPickerFormatText {
81
- margin: 0 12px;
81
+ margin: 0 var(--intergalactic-spacing-3x, 12px);
82
82
  }
83
83
  }
84
84
 
85
85
  SPickerFormat[disabled] {
86
- opacity: var(--disabled-opacity);
86
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
87
87
  cursor: default;
88
88
  pointer-events: none;
89
- border-color: transparent transparent transparent var(--gray-200);
89
+ border-color: transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf);
90
90
  }
91
91
 
92
92
  SPickerFormat[keyboardFocused] {
93
- box-shadow: var(--keyboard-focus);
93
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
94
94
  }
95
95
 
96
96
  STimePickerSeparator[disabled] {
97
- opacity: var(--disabled-opacity);
97
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
98
98
  pointer-events: none;
99
99
  }
package/lib/es6/TimePicker.js CHANGED
@@ -30,22 +30,22 @@ var style = (
30
30
  /*__reshadow_css_start__*/
31
31
  _sstyled.insert(
32
32
  /*__inner_css_start__*/
33
- ".___STimePicker_1qlsu_gg_{position:relative;width:auto}.___STimePicker_1qlsu_gg_.__disabled_1qlsu_gg_{color:rgba(25,27,35,.3);cursor:default}.___SPickerInput_1qlsu_gg_{box-sizing:content-box;text-align:center;z-index:1}.___SPickerInput_1qlsu_gg_.__placeholder_1qlsu_gg_{text-overflow:clip}.___SPickerInput_1qlsu_gg_._size_m_1qlsu_gg_{width:19px}.___SPickerInput_1qlsu_gg_._size_l_1qlsu_gg_{width:21px}.___SPickerFormat_1qlsu_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:500;line-height:normal;text-decoration:none;align-items:center;border:1px solid #c4c7cf;border-radius:0 6px 6px 0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#6c6e79;background-color:rgba(138,142,155,.1)}.___SPickerFormat_1qlsu_gg_:hover{color:#6c6e79;background-color:rgba(138,142,155,.2)}.___SPickerFormat_1qlsu_gg_:active,.___SPickerFormat_1qlsu_gg_.__active_1qlsu_gg_{color:#6c6e79;background-color:rgba(138,142,155,.3)}.___SPickerFormat_1qlsu_gg_._size_m_1qlsu_gg_{height:28px;font-size:14px;margin:0 -1px 0 0}.___SPickerFormat_1qlsu_gg_._size_m_1qlsu_gg_ .___SPickerFormatText_1qlsu_gg_{margin:0 8px}.___SPickerFormat_1qlsu_gg_._size_l_1qlsu_gg_{height:40px;font-size:16px;margin:0 -4px 0 0}.___SPickerFormat_1qlsu_gg_._size_l_1qlsu_gg_ .___SPickerFormatText_1qlsu_gg_{margin:0 12px}.___SPickerFormat_1qlsu_gg_.__disabled_1qlsu_gg_{opacity:0.3;cursor:default;pointer-events:none;border-color:transparent transparent transparent #c4c7cf}.___SPickerFormat_1qlsu_gg_.__keyboardFocused_1qlsu_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}.___STimePickerSeparator_1qlsu_gg_.__disabled_1qlsu_gg_{opacity:0.3;pointer-events:none}"
33
+ ".___STimePicker_cebeg_gg_{position:relative;width:auto}.___STimePicker_cebeg_gg_.__disabled_cebeg_gg_{color:var(--intergalactic-text-secondary,#6c6e79);cursor:default}.___SPickerInput_cebeg_gg_{box-sizing:content-box;text-align:center;z-index:1}.___SPickerInput_cebeg_gg_.__placeholder_cebeg_gg_{text-overflow:clip}.___SPickerInput_cebeg_gg_._size_m_cebeg_gg_{width:19px}.___SPickerInput_cebeg_gg_._size_l_cebeg_gg_{width:21px}.___SPickerFormat_cebeg_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:var(--intergalactic-medium,500);line-height:normal;text-decoration:none;align-items:center;border:1px solid var(--intergalactic-border-primary,#c4c7cf);border-radius:0 var(--intergalactic-rounded-medium,6px) var(--intergalactic-rounded-medium,6px) 0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--intergalactic-text-secondary,#6c6e79);background-color:var(--intergalactic-bg-secondary-neutral,#f4f5f9)}.___SPickerFormat_cebeg_gg_:hover{color:var(--intergalactic-text-secondary,#6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-hover,#e0e1e9)}.___SPickerFormat_cebeg_gg_:active,.___SPickerFormat_cebeg_gg_.__active_cebeg_gg_{color:var(--intergalactic-text-secondary,#6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-active,#c4c7cf)}.___SPickerFormat_cebeg_gg_._size_m_cebeg_gg_{height:var(--intergalactic-form-control-m,28px);font-size:var(--intergalactic-fs-200,14px);margin:0 -1px 0 0}.___SPickerFormat_cebeg_gg_._size_m_cebeg_gg_ .___SPickerFormatText_cebeg_gg_{margin:0 var(--intergalactic-spacing-2x,8px)}.___SPickerFormat_cebeg_gg_._size_l_cebeg_gg_{height:var(--intergalactic-form-control-l,40px);font-size:var(--intergalactic-fs-300,16px);margin:0 calc(var(--intergalactic-spacing-1x, 4px)*-1) 0 0}.___SPickerFormat_cebeg_gg_._size_l_cebeg_gg_ .___SPickerFormatText_cebeg_gg_{margin:0 var(--intergalactic-spacing-3x,12px)}.___SPickerFormat_cebeg_gg_.__disabled_cebeg_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none;border-color:transparent transparent transparent var(--intergalactic-border-primary,#c4c7cf)}.___SPickerFormat_cebeg_gg_.__keyboardFocused_cebeg_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___STimePickerSeparator_cebeg_gg_.__disabled_cebeg_gg_{opacity:var(--intergalactic-disabled-opacity,.3);pointer-events:none}"
34
34
  /*__inner_css_end__*/
35
- , "1qlsu_gg_")
35
+ , "cebeg_gg_")
36
36
  /*__reshadow_css_end__*/
37
37
  , {
38
- "__STimePicker": "___STimePicker_1qlsu_gg_",
39
- "_disabled": "__disabled_1qlsu_gg_",
40
- "__SPickerInput": "___SPickerInput_1qlsu_gg_",
41
- "_placeholder": "__placeholder_1qlsu_gg_",
42
- "_size_m": "_size_m_1qlsu_gg_",
43
- "_size_l": "_size_l_1qlsu_gg_",
44
- "__SPickerFormat": "___SPickerFormat_1qlsu_gg_",
45
- "_active": "__active_1qlsu_gg_",
46
- "__SPickerFormatText": "___SPickerFormatText_1qlsu_gg_",
47
- "_keyboardFocused": "__keyboardFocused_1qlsu_gg_",
48
- "__STimePickerSeparator": "___STimePickerSeparator_1qlsu_gg_"
38
+ "__STimePicker": "___STimePicker_cebeg_gg_",
39
+ "_disabled": "__disabled_cebeg_gg_",
40
+ "__SPickerInput": "___SPickerInput_cebeg_gg_",
41
+ "_placeholder": "__placeholder_cebeg_gg_",
42
+ "_size_m": "_size_m_cebeg_gg_",
43
+ "_size_l": "_size_l_cebeg_gg_",
44
+ "__SPickerFormat": "___SPickerFormat_cebeg_gg_",
45
+ "_active": "__active_cebeg_gg_",
46
+ "__SPickerFormatText": "___SPickerFormatText_cebeg_gg_",
47
+ "_keyboardFocused": "__keyboardFocused_cebeg_gg_",
48
+ "__STimePickerSeparator": "___STimePickerSeparator_cebeg_gg_"
49
49
  });
50
50
  var MAP_MERIDIEM = {
51
51
  AM: 'PM',
package/lib/es6/style/time-picker.shadow.css CHANGED
@@ -1,12 +1,10 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  STimePicker {
4
2
  position: relative;
5
3
  width: auto;
6
4
  }
7
5
 
8
6
  STimePicker[disabled] {
9
- color: color-mod(var(--gray-800) a(30%));
7
+ color: var(--intergalactic-text-secondary, #6c6e79);
10
8
  cursor: default;
11
9
  }
12
10
 
@@ -35,12 +33,13 @@ SPickerFormat {
35
33
  padding: 0;
36
34
  white-space: nowrap;
37
35
  font-family: inherit;
38
- font-weight: 500;
36
+ font-weight: var(--intergalactic-medium, 500);
39
37
  line-height: normal;
40
38
  text-decoration: none;
41
39
  align-items: center;
42
- border: 1px solid var(--gray-200);
43
- border-radius: 0 var(--rounded-m) var(--rounded-m) 0;
40
+ border: 1px solid var(--intergalactic-border-primary, #c4c7cf);
41
+ border-radius: 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px)
42
+ 0;
44
43
  outline: 0;
45
44
  box-shadow: none;
46
45
  cursor: pointer;
@@ -49,51 +48,52 @@ SPickerFormat {
49
48
  user-select: none;
50
49
  touch-action: manipulation;
51
50
  -webkit-tap-highlight-color: transparent;
52
- color: var(--gray-500);
53
- background-color: color-mod(var(--gray-400) a(10%));
51
+ color: var(--intergalactic-text-secondary, #6c6e79);
52
+ background-color: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
54
53
 
55
54
  &:hover {
56
- color: var(--gray-500);
57
- background-color: color-mod(var(--gray-400) a(20%));
55
+ color: var(--intergalactic-text-secondary, #6c6e79);
56
+ background-color: var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9);
58
57
  }
59
58
 
60
59
  &:active,
61
60
  &[active] {
62
- color: var(--gray-500);
63
- background-color: color-mod(var(--gray-400) a(30%));
61
+ color: var(--intergalactic-text-secondary, #6c6e79);
62
+ background-color: var(--intergalactic-bg-secondary-neutral-active, #c4c7cf);
64
63
  }
65
64
  }
66
65
 
67
66
  SPickerFormat[size='m'] {
68
- height: var(--form-control-m);
69
- font-size: var(--fs-200);
67
+ height: var(--intergalactic-form-control-m, 28px);
68
+ font-size: var(--intergalactic-fs-200, 14px);
69
+ /* disable-tokens-validator */
70
70
  margin: 0 -1px 0 0;
71
71
  & SPickerFormatText {
72
- margin: 0 8px;
72
+ margin: 0 var(--intergalactic-spacing-2x, 8px);
73
73
  }
74
74
  }
75
75
 
76
76
  SPickerFormat[size='l'] {
77
- height: var(--form-control-l);
78
- font-size: var(--fs-300);
79
- margin: 0 -4px 0 0;
77
+ height: var(--intergalactic-form-control-l, 40px);
78
+ font-size: var(--intergalactic-fs-300, 16px);
79
+ margin: 0 calc(-1 * var(--intergalactic-spacing-1x, 4px)) 0 0;
80
80
  & SPickerFormatText {
81
- margin: 0 12px;
81
+ margin: 0 var(--intergalactic-spacing-3x, 12px);
82
82
  }
83
83
  }
84
84
 
85
85
  SPickerFormat[disabled] {
86
- opacity: var(--disabled-opacity);
86
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
87
87
  cursor: default;
88
88
  pointer-events: none;
89
- border-color: transparent transparent transparent var(--gray-200);
89
+ border-color: transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf);
90
90
  }
91
91
 
92
92
  SPickerFormat[keyboardFocused] {
93
- box-shadow: var(--keyboard-focus);
93
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
94
94
  }
95
95
 
96
96
  STimePickerSeparator[disabled] {
97
- opacity: var(--disabled-opacity);
97
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
98
98
  pointer-events: none;
99
99
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/time-picker",
3
3
  "description": "Semrush TimePicker Component",
4
- "version": "3.2.19",
4
+ "version": "3.3.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",