@trackunit/css-core 1.9.9 → 1.9.12

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/package.json +1 -1
  2. package/src/lib/react-calendar.css +43 -32
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/css-core",
3
- "version": "1.9.9",
3
+ "version": "1.9.12",
4
4
  "main": "src/lib/core.css",
5
5
  "repository": "https://github.com/Trackunit/manager",
6
6
  "license": "SEE LICENSE IN LICENSE.txt",
package/src/lib/react-calendar.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .react-calendar {
2
- width: 350px;
3
- max-width: 100%;
2
+ width: 330px;
4
3
  background: white;
5
4
  line-height: 1.125em;
5
+ padding: var(--spacing-4) var(--spacing-3);
6
6
  }
7
7
 
8
8
  .react-calendar--doubleView {
@@ -47,22 +47,27 @@
47
47
  .react-calendar__navigation button {
48
48
  min-width: 44px;
49
49
  background: none;
50
+ border-radius: 8px;
51
+ }
52
+
53
+ .react-calendar__navigation__arrow {
54
+ color: rgb(var(--color-neutral-400) / var(--tw-bg-opacity));
50
55
  }
51
56
 
52
57
  .react-calendar__navigation button:disabled {
53
- background-color: #f0f0f0;
58
+ background-color: rgb(var(--color-neutral-50) / var(--tw-bg-opacity));
54
59
  }
55
60
 
56
61
  .react-calendar__navigation button:enabled:hover,
57
62
  .react-calendar__navigation button:enabled:focus {
58
- background-color: #e6e6e6;
63
+ background-color: rgb(var(--color-neutral-200) / var(--tw-bg-opacity));
59
64
  }
60
65
 
61
66
  .react-calendar__month-view__weekdays {
62
67
  text-align: center;
63
68
  font: inherit;
64
69
  font-size: 0.75em;
65
- color: #94a3b8;
70
+ color: rgb(var(--color-neutral-400) / var(--tw-bg-opacity));
66
71
  font-weight: bold;
67
72
  }
68
73
 
@@ -87,13 +92,14 @@
87
92
  row-gap: 8px;
88
93
  }
89
94
 
90
- .react-calendar__month-view__days__day--weekend {
95
+ .react-calendar__month-view__days__day--neighboringMonth.react-calendar__tile--active {
96
+ background: rgb(var(--color-primary-50) / 0.5);
91
97
  }
92
98
 
93
99
  .react-calendar__month-view__days__day--neighboringMonth,
94
100
  .react-calendar__decade-view__years__year--neighboringDecade,
95
101
  .react-calendar__century-view__decades__decade--neighboringCentury {
96
- color: #757575;
102
+ color: rgb(var(--color-neutral-500) / var(--tw-bg-opacity));
97
103
  }
98
104
 
99
105
  .react-calendar__year-view .react-calendar__tile,
@@ -103,6 +109,7 @@
103
109
  }
104
110
 
105
111
  .react-calendar__tile {
112
+ position: relative;
106
113
  max-width: 100%;
107
114
  padding: 10px 6.6667px;
108
115
  background: none;
@@ -111,67 +118,71 @@
111
118
  font-size: 0.833em;
112
119
  }
113
120
 
121
+ .react-calendar__tile:focus:before {
122
+ content: " ";
123
+ position: absolute;
124
+ background: transparent;
125
+ left: 0;
126
+ top: 0;
127
+ width: 100%;
128
+ height: 100%;
129
+ border: 2px solid rgb(var(--color-primary-600) / var(--tw-bg-opacity));
130
+ border-radius: 8px;
131
+ }
132
+
114
133
  .react-calendar__tile:disabled {
115
- background-color: #f0f0f0;
116
- color: #ababab;
134
+ background-color: rgb(var(--color-neutral-50) / var(--tw-bg-opacity));
135
+ color: rgb(var(--color-neutral-100) / var(--tw-bg-opacity));
117
136
  }
118
137
 
119
138
  .react-calendar__month-view__days__day--neighboringMonth:disabled,
120
139
  .react-calendar__decade-view__years__year--neighboringDecade:disabled,
121
140
  .react-calendar__century-view__decades__decade--neighboringCentury:disabled {
122
- color: #cdcdcd;
141
+ color: rgb(var(--color-neutral-100) / var(--tw-bg-opacity));
123
142
  }
124
143
 
125
- .react-calendar__tile:enabled:hover,
126
- .react-calendar__tile:enabled:focus {
127
- background-color: #e6e6e6;
144
+ .react-calendar__tile:enabled:hover {
145
+ background-color: rgb(var(--color-neutral-200) / var(--tw-bg-opacity));
128
146
  }
129
147
 
130
148
  .react-calendar__tile--now:not(.react-calendar__tile--active) {
131
- color: #2563eb;
132
- }
133
-
134
- .react-calendar__tile--now:enabled:hover,
135
- .react-calendar__tile--now:enabled:focus {
136
- background: #1d50bc;
149
+ color: rgb(var(--color-primary-600) / var(--tw-bg-opacity))
137
150
  }
138
151
 
139
152
  .react-calendar__tile--hasActive {
140
- background: #76baff;
153
+ background: rgb(var(--color-primary-200) / var(--tw-bg-opacity));
141
154
  }
142
155
 
143
- .react-calendar__tile--hasActive:enabled:hover,
144
- .react-calendar__tile--hasActive:enabled:focus {
145
- background: #a9d4ff;
156
+ .react-calendar__tile--hasActive:enabled:hover {
157
+ background: rgb(var(--color-primary-100) / var(--tw-bg-opacity));
146
158
  }
147
159
 
148
160
  .react-calendar__tile--active {
149
- background: #eff6ff;
161
+ background: rgb(var(--color-primary-50) / var(--tw-bg-opacity));
150
162
  }
151
163
 
152
164
  .react-calendar__tile:not(.react-calendar__tile--active):enabled:hover {
153
165
  border-radius: 8px 8px 8px 8px;
154
166
  }
155
167
 
156
- .react-calendar__tile--active:enabled:hover,
157
- .react-calendar__tile--active:enabled:focus {
158
- background: #eff6ff;
168
+ .react-calendar__tile--active:enabled:hover {
169
+ background: rgb(var(--color-primary-50) / var(--tw-bg-opacity));
159
170
  border-radius: none !important;
160
171
  }
161
172
 
162
173
  .react-calendar--selectRange .react-calendar__tile--hover {
163
- background-color: #eff6ff;
174
+ background: rgb(var(--color-primary-50) / var(--tw-bg-opacity));
164
175
  border-radius: none !important;
165
176
  }
166
177
 
167
178
  .react-calendar__tile--rangeStart {
168
- background: #006edc !important;
169
- border-radius: 8px 8px 8px 8px;
179
+ background: rgb(var(--color-primary-600) / var(--tw-bg-opacity)) !important;
180
+ border-radius: 8px;
170
181
  color: white;
171
182
  }
172
183
 
173
184
  .react-calendar__tile--rangeEnd {
174
- background: #006edc !important;
175
- border-radius: 8px 8px 8px 8px;
185
+ background: rgb(var(--color-primary-600) / var(--tw-bg-opacity)) !important;
186
+ border-radius: 8px;
176
187
  color: white;
177
188
  }