@drivy/cobalt 0.46.1 → 0.46.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 (20) hide show
  1. package/cjs/tokens/palette.js +73 -29
  2. package/cjs/tokens/palette.js.map +1 -1
  3. package/cjs/tokens/theme.js +119 -111
  4. package/cjs/tokens/theme.js.map +1 -1
  5. package/components/Calendar/CalendarView/CalendarViewMonth.js +2 -2
  6. package/components/Calendar/CalendarView/CalendarViewMonth.js.map +1 -1
  7. package/package.json +1 -1
  8. package/styles/components/Calendar/CalendarView/index.scss +7 -16
  9. package/styles/components/Icon/iconColors.scss +30 -26
  10. package/styles/core/_colors-map.scss +49 -41
  11. package/styles/core/default-theme.scss +69 -61
  12. package/styles/core/palette.scss +70 -26
  13. package/styles/core/theme.scss +175 -159
  14. package/tokens/palette.js +73 -29
  15. package/tokens/palette.js.map +1 -1
  16. package/tokens/theme.js +119 -111
  17. package/tokens/theme.js.map +1 -1
  18. package/types/src/components/Icon/index.d.ts +1 -1
  19. package/types/src/tokens/index.d.ts +95 -43
  20. package/utilities.css +249 -169
package/cjs/tokens/palette.js CHANGED
@@ -2,14 +2,20 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const white = "#FFF";
5
+ const white = "#FFFFFF";
6
6
  const purple = {
7
- "100": "#F6E5F5",
8
- "300": "#CA6BC3",
9
- "400": "#C04FB8",
7
+ "100": "#F8F2F8",
8
+ "200": "#F0E1EE",
9
+ "300": "#DB97D5",
10
+ "400": "#C758BD",
10
11
  "500": "#B01AA7",
11
- "700": "#8D1586",
12
- "900": "#5F1159"
12
+ "600": "#A6199D",
13
+ "700": "#901588",
14
+ "800": "#75116F",
15
+ "900": "#530C4F",
16
+ "1000": "#3E093B",
17
+ "1100": "#280626",
18
+ "1200": "#160315"
13
19
  };
14
20
  const purpleDeep = {
15
21
  "100": "#F2A6EE",
@@ -17,7 +23,8 @@ const purpleDeep = {
17
23
  "400": "#C31DBA",
18
24
  "500": "#9B1794",
19
25
  "700": "#73116E",
20
- "900": "#4B0B48"
26
+ "900": "#4B0B48",
27
+ "1000": "#3E093C"
21
28
  };
22
29
  const purpleLight = {
23
30
  "100": "#FFDCFD"
@@ -28,6 +35,7 @@ const navy = {
28
35
  "120": "#CAC7D2",
29
36
  "200": "#BBB8C7",
30
37
  "300": "#7B728E",
38
+ "400": "#554B70",
31
39
  "500": "#362E53",
32
40
  "700": "#261A48",
33
41
  "900": "#0F0429"
@@ -35,30 +43,42 @@ const navy = {
35
43
  const yellow = {
36
44
  "100": "#FFEED1",
37
45
  "300": "#FFDDA3",
46
+ "400": "#FFD387",
38
47
  "500": "#FFC766",
39
48
  "700": "#C59548",
40
49
  "900": "#75592D",
41
50
  "1000": "#3B2E17"
42
51
  };
43
52
  const green = {
44
- "100": "#CDEBCB",
45
- "120": "#BFE5BD",
46
- "150": "#B1E0AE",
53
+ "100": "#F4F9F3",
54
+ "200": "#E5F2E4",
55
+ "300": "#C8E5C6",
56
+ "400": "#93D790",
47
57
  "500": "#5CBF54",
48
58
  "700": "#479D3E",
49
59
  "900": "#2F6D1C",
50
- "1000": "#1B500A"
60
+ "1000": "#1B500A",
61
+ "1100": "#143B05",
62
+ "1200": "#102E03"
51
63
  };
52
64
  const red = {
53
65
  "100": "#FDEDED",
54
- "120": "#FBDADA",
55
- "150": "#F9C8C8",
56
- "200": "#E38C8C",
57
- "400": "#ED4545",
66
+ "120": "#F7E9E9",
67
+ "150": "#EED0D0",
68
+ "200": "#E5B5B5",
69
+ "300": "#DB9494",
70
+ "400": "#D16969",
58
71
  "500": "#C71414",
59
- "700": "#AF1212",
60
- "800": "#764747",
61
- "900": "#3F2424"
72
+ "600": "#B61212",
73
+ "700": "#A21010",
74
+ "800": "#8D0E0E",
75
+ "900": "#730C0C",
76
+ "1000": "#510808",
77
+ "1200": "#4A0707",
78
+ "1300": "#420707",
79
+ "1400": "#390606",
80
+ "1500": "#2F0505",
81
+ "1600": "#210303"
62
82
  };
63
83
  const orange = {
64
84
  "100": "#F1D5B1",
@@ -70,18 +90,38 @@ const black = {
70
90
  "50": "#544F53",
71
91
  "75": "#443F44",
72
92
  "100": "#363036",
93
+ "200": "#2E292E",
73
94
  "300": "#282127",
95
+ "400": "#251D24",
74
96
  "500": "#191218",
75
- "1000": "#000"
97
+ "600": "#0F0A0E",
98
+ "700": "#090609",
99
+ "800": "#030203",
100
+ "1000": "#000000"
76
101
  };
77
102
  const grey = {
78
103
  "50": "#F8F9FA",
79
104
  "100": "#E3E2E3",
105
+ "200": "#C3C1C3",
80
106
  "300": "#A9A6A9",
81
- "500": "#918D91"
107
+ "400": "#9D9A9D",
108
+ "500": "#918D91",
109
+ "600": "#7D787D",
110
+ "700": "#6A676A"
82
111
  };
83
112
  const blue = {
84
- "500": "#79A3F3"
113
+ "100": "#F5F8FF",
114
+ "200": "#E5EDFF",
115
+ "300": "#B7D3FF",
116
+ "400": "#74B0FF",
117
+ "500": "#1F81F3",
118
+ "600": "#185BD1",
119
+ "700": "#1B3B8B",
120
+ "800": "#19255C",
121
+ "900": "#151C38",
122
+ "1000": "#101423",
123
+ "1100": "#0D1016",
124
+ "1200": "#0A0B0F"
85
125
  };
86
126
  const turquoise = {
87
127
  "50": "#ECF9FB",
@@ -97,14 +137,18 @@ const turquoise = {
97
137
  "1200": "#11505E"
98
138
  };
99
139
  const season = {
100
- "100": "#BDFFAC",
101
- "200": "#94EA84",
102
- "300": "#73C865",
103
- "400": "#54A949",
104
- "700": "#0B7011",
105
- "800": "#005100",
106
- "900": "#030",
107
- "1000": "#001900"
140
+ "100": "#A9D4A8",
141
+ "200": "#9FD09E",
142
+ "300": "#7CC27B",
143
+ "400": "#56B654",
144
+ "500": "#24AA1F",
145
+ "600": "#229F1C",
146
+ "700": "#1F931A",
147
+ "800": "#1D8618",
148
+ "900": "#1A7816",
149
+ "1000": "#166612",
150
+ "1100": "#11510F",
151
+ "1200": "#0A3109"
108
152
  };
109
153
  const newPurple = {
110
154
  "200": "#E46FEE",
package/cjs/tokens/palette.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"palette.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"palette.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/cjs/tokens/theme.js CHANGED
@@ -4,41 +4,42 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const background = {
6
6
  primary: "white/black.500",
7
- secondary: "white/black.300",
8
- accent: "purple.500/purpleDeep.500",
9
- accentAlt: "purple.100/purpleDeep.900",
7
+ secondary: "white/black.400",
8
+ accent: "purple.500/purple.400",
9
+ accentAlt: "purple.200/purple.900",
10
10
  info: "yellow.100/yellow.1000",
11
11
  error: "red.500/red.500",
12
- errorAlt: "red.100/red.900",
12
+ errorAlt: "red.100/red.1500",
13
13
  success: "green.700/green.700",
14
- successAlt: "green.100/green.1000",
14
+ successAlt: "green.100/green.1200",
15
15
  connect: "newPurple.500/newPurple.200",
16
16
  connectAlt: "turquoise.50/turquoise.900",
17
- keyExchange: "newViolet.500/newViolet.200",
18
- picked: "green.700/green.500",
19
- rideshare: "black.1000/black.1000",
20
17
  driver: "yellow.500/yellow.500",
21
18
  owner: "navy.700/navy.700",
22
- disabled: "navy.100/black.100",
19
+ disabled: "navy.50/black.500",
23
20
  neutral: "navy.100/black.50",
24
21
  neutralAlt: "navy.50/black.100",
25
- seasonLow: "season.100/season.700",
26
- seasonMedium: "season.200/season.800",
27
- seasonHigh: "season.300/season.900",
28
- seasonVeryhigh: "season.400/season.1000",
29
- rental: "turquoise.100/turquoise.1200",
30
- blocker: "navy.100/black.75",
22
+ seasonLow: "season.100/season.300",
23
+ seasonMedium: "season.300/season.600",
24
+ seasonHigh: "season.700/season.900",
25
+ seasonVeryHigh: "season.1100/season.1200",
26
+ rental: "blue.500/blue.700",
27
+ rentalAlt: "blue.300/blue.500",
28
+ blocker: "grey.100/black.200",
29
+ rideshare: "black.1000/black.1000",
30
+ keyExchange: "newViolet.500/newViolet.200",
31
+ picked: "green.700/green.500",
31
32
  base: "navy.900/navy.50",
32
33
  secondaryInteractive: {
33
- DEFAULT: "white/black.300",
34
+ DEFAULT: "white/black.400",
34
35
  hover: "navy.50/black.300"
35
36
  },
36
37
  accentInteractive: {
37
- DEFAULT: "purple.500/purpleDeep.500",
38
+ DEFAULT: "purple.500/purple.400",
38
39
  hover: "purple.700/purpleDeep.400"
39
40
  },
40
41
  accentAltInteractive: {
41
- DEFAULT: "purple.100/purpleDeep.900",
42
+ DEFAULT: "purple.200/purple.900",
42
43
  hover: "purpleLight.100/purpleDeep.900"
43
44
  },
44
45
  connectInteractive: {
@@ -52,128 +53,135 @@ const background = {
52
53
  };
53
54
  const text = {
54
55
  base: "navy.700/grey.100",
55
- subdued: "navy.300/grey.300",
56
- accent: "purple.500/purpleDeep.400",
57
- accentAlt: "purple.500/grey.100",
58
- info: "yellow.900/yellow.300",
59
- infoAlt: "yellow.700/yellow.700",
56
+ subdued: "navy.400/grey.300",
57
+ accent: "purple.500/purple.300",
58
+ accentAlt: "purple.700/purple.200",
59
+ info: "yellow.900/yellow.400",
60
60
  error: "red.500/red.400",
61
- errorAlt: "red.500/red.500",
62
- success: "green.700/green.700",
63
- successAlt: "green.1000/green.100",
64
- warning: "orange.500/orange.300",
61
+ errorAlt: "red.500/red.200",
62
+ success: "green.700/green.400",
63
+ successAlt: "green.1000/green.400",
65
64
  connect: "newPurple.500/newPurple.200",
66
65
  connectAlt: "turquoise.900/white",
67
- keyExchange: "newViolet.500/newViolet.200",
68
- picked: "green.700/green.500",
69
- rideshare: "black.1000/white",
70
66
  driver: "navy.700/navy.700",
71
67
  owner: "white/grey.100",
72
- disabled: "navy.200/black.50",
73
- inversed: "white/white",
74
- onAccent: "white/grey.100",
68
+ warning: "orange.500/orange.300",
69
+ infoAlt: "yellow.700/yellow.700",
70
+ disabled: "navy.120/black.50",
71
+ onAccent: "white/black.1000",
75
72
  onRideshare: "white/white",
76
73
  onError: "white/white",
77
74
  onSuccess: "white/white",
78
- onConnect: "white/navy.900",
79
- onKeyExchange: "white/navy.900",
80
- onPicked: "white/navy.900",
75
+ onConnect: "white/black.1000",
76
+ onKeyExchange: "white/black.1000",
77
+ onPicked: "white/black.1000",
78
+ keyExchange: "newViolet.500/newViolet.200",
79
+ picked: "green.700/green.500",
80
+ rideshare: "black.1000/white",
81
81
  onBase: "white/navy.900",
82
+ onSeasonLow: "black.800/black.800",
83
+ onSeasonMedium: "black.800/white",
84
+ onSeasonHigh: "white/white",
85
+ onSeasonVeryHigh: "white/white",
86
+ onRental: "white/white",
87
+ onRentalAlt: "black.300/black.1000",
88
+ inversed: "white/white",
82
89
  baseInteractive: {
83
90
  DEFAULT: "navy.700/grey.100",
84
91
  hover: "navy.900/grey.300"
85
92
  },
86
93
  subduedInteractive: {
87
- DEFAULT: "navy.300/grey.300",
94
+ DEFAULT: "navy.400/grey.300",
88
95
  hover: "navy.500/grey.300"
89
96
  },
90
97
  accentInteractive: {
91
- DEFAULT: "purple.500/purpleDeep.400",
98
+ DEFAULT: "purple.500/purple.300",
92
99
  hover: "purple.700/purpleDeep.400"
93
100
  },
94
101
  accentAltInteractive: {
95
- DEFAULT: "purple.500/grey.100",
102
+ DEFAULT: "purple.700/purple.200",
96
103
  hover: "purple.700/grey.100"
97
104
  }
98
105
  };
99
106
  const icon = {
100
- base: "navy.500/grey.100",
101
- subdued: "navy.300/grey.300",
102
- accent: "purple.500/purpleDeep.400",
103
- accentAlt: "purple.500/grey.100",
104
- info: "yellow.900/yellow.300",
105
- infoAlt: "yellow.500/yellow.700",
107
+ base: "navy.700/grey.100",
108
+ subdued: "navy.400/grey.300",
109
+ accent: "purple.500/purple.300",
110
+ accentAlt: "purple.700/purple.200",
111
+ info: "yellow.900/yellow.400",
106
112
  error: "red.500/red.400",
107
113
  errorAlt: "red.500/red.200",
108
- success: "green.700/green.700",
109
- successAlt: "green.1000/green.100",
110
- warning: "orange.500/orange.300",
114
+ success: "green.700/green.400",
115
+ successAlt: "green.1000/green.400",
111
116
  connect: "newPurple.500/newPurple.200",
112
117
  connectAlt: "turquoise.900/turquoise.50",
113
- keyExchange: "newViolet.500/newViolet.200",
114
- picked: "green.700/green.500",
115
- rideshare: "black.1000/white",
116
118
  driver: "navy.700/navy.700",
117
- owner: "white/white",
118
- disabled: "navy.200/black.50",
119
- disabledAlt: "navy.300/grey.500",
120
- inversed: "white/white",
121
- onAccent: "white/white",
119
+ owner: "white/grey.100",
120
+ warning: "orange.500/orange.300",
121
+ infoAlt: "yellow.500/yellow.700",
122
+ disabled: "navy.200/black.75",
123
+ onAccent: "white/black.1000",
122
124
  onRideshare: "white/white",
123
125
  onError: "white/white",
124
126
  onSuccess: "white/white",
125
- onConnect: "white/navy.900",
126
- onKeyExchange: "white/navy.900",
127
- onPicked: "white/navy.900",
127
+ onConnect: "white/black.1000",
128
+ onKeyExchange: "white/black.1000",
129
+ onPicked: "white/black.1000",
130
+ keyExchange: "newViolet.500/newViolet.200",
131
+ picked: "green.700/green.500",
132
+ rideshare: "black.1000/white",
128
133
  onBase: "white/navy.900",
134
+ disabledAlt: "navy.120/black.50",
135
+ onRental: "white/white",
136
+ inversed: "white/white",
129
137
  baseInteractive: {
130
- DEFAULT: "navy.500/grey.100",
138
+ DEFAULT: "navy.700/grey.100",
131
139
  hover: "navy.700/grey.100"
132
140
  },
133
141
  subduedInteractive: {
134
- DEFAULT: "navy.300/grey.300",
142
+ DEFAULT: "navy.400/grey.300",
135
143
  hover: "navy.500/grey.300"
136
144
  },
137
145
  accentInteractive: {
138
- DEFAULT: "purple.500/purpleDeep.400",
146
+ DEFAULT: "purple.500/purple.300",
139
147
  hover: "purple.700/purpleDeep.400"
140
148
  },
141
149
  accentAltInteractive: {
142
- DEFAULT: "purple.500/grey.100",
150
+ DEFAULT: "purple.700/purple.200",
143
151
  hover: "purple.700/grey.100"
144
152
  }
145
153
  };
146
154
  const stroke = {
147
- base: "navy.100/black.50",
155
+ base: "navy.100/black.100",
148
156
  subdued: "navy.50/black.100",
149
- strong: "navy.300/navy.200",
150
- accent: "purple.500/purpleDeep.500",
151
- accentAlt: "purple.300/purpleDeep.400",
152
- error: "red.500/red.200",
153
- errorAlt: "red.500/red.200",
157
+ accent: "purple.500/purple.400",
158
+ accentAlt: "purple.600/purple.400",
154
159
  success: "green.500/green.700",
155
160
  successAlt: "green.500/green.700",
156
- connect: "newPurple.500/newPurple.200",
157
- keyExchange: "newViolet.500/newViolet.200",
158
- picked: "green.700/green.500",
159
- rideshare: "black.1000/white",
160
- rental: "turquoise.500/turquoise.500",
161
- blocker: "navy.300/grey.300",
161
+ error: "red.500/red.200",
162
+ errorAlt: "red.500/red.200",
163
+ strong: "grey.300/grey.700",
162
164
  onAccent: "white/grey.100",
165
+ rental: "blue.700/blue.500",
166
+ blocker: "grey.200/black.50",
163
167
  onError: "white/white",
164
168
  onSuccess: "white/white",
165
- onConnect: "white/black.1000",
166
- onPicked: "white/black.1000",
167
- onKeyExchange: "white/black.1000",
169
+ connect: "newPurple.500/newPurple.200",
170
+ keyExchange: "newViolet.500/newViolet.200",
171
+ picked: "green.700/green.500",
172
+ onConnect: "white/black.75",
173
+ onKeyExchange: "white/black.75",
174
+ onPicked: "white/black.75",
168
175
  onRideshare: "white/black.1000",
169
- onBase: "white/black.1000",
176
+ rideshare: "black.1000/white",
177
+ onBase: "white/black.600",
170
178
  baseInteractive: {
171
- DEFAULT: "navy.100/black.50",
179
+ DEFAULT: "navy.100/black.100",
172
180
  hover: "navy.300/purpleDeep.400",
173
181
  press: "navy.500/purpleDeep.400"
174
182
  },
175
183
  accentInteractive: {
176
- DEFAULT: "purple.500/purpleDeep.500",
184
+ DEFAULT: "purple.500/purple.400",
177
185
  hover: "purple.700/purpleDeep.400",
178
186
  press: "purple.900/purpleDeep.400"
179
187
  },
@@ -185,8 +193,8 @@ const stroke = {
185
193
  };
186
194
  const buttonIcon = {
187
195
  selected: "purple.500/grey.100",
188
- primary: "white/grey.100",
189
- secondary: "purple.500/purpleDeep.400",
196
+ primary: "white/black.1000",
197
+ secondary: "purple.500/purple.300",
190
198
  tertiary: "purple.500/white",
191
199
  destructive: "red.500/red.200",
192
200
  success: "white/green.100",
@@ -194,12 +202,12 @@ const buttonIcon = {
194
202
  disabled: "navy.300/grey.300",
195
203
  accentAlt: "purple.500/grey.100",
196
204
  primaryInteractive: {
197
- DEFAULT: "white/grey.100",
205
+ DEFAULT: "white/black.1000",
198
206
  hover: "white/white",
199
207
  press: "white/white"
200
208
  },
201
209
  secondaryInteractive: {
202
- DEFAULT: "purple.500/purpleDeep.400",
210
+ DEFAULT: "purple.500/purple.300",
203
211
  hover: "purple.700/purpleDeep.700",
204
212
  press: "purple.900/purpleDeep.900"
205
213
  },
@@ -221,8 +229,8 @@ const buttonIcon = {
221
229
  };
222
230
  const buttonLabel = {
223
231
  selected: "purple.500/grey.100",
224
- primary: "white/grey.100",
225
- secondary: "purple.500/purpleDeep.400",
232
+ primary: "white/black.1000",
233
+ secondary: "purple.500/purple.300",
226
234
  tertiary: "purple.500/white",
227
235
  disabled: "navy.300/grey.300",
228
236
  accentAlt: "purple.500/grey.100",
@@ -230,12 +238,12 @@ const buttonLabel = {
230
238
  success: "white/green.100",
231
239
  successAlt: "green.900/green.100",
232
240
  primaryInteractive: {
233
- DEFAULT: "white/grey.100",
241
+ DEFAULT: "white/black.1000",
234
242
  hover: "white/white",
235
243
  press: "white/white"
236
244
  },
237
245
  secondaryInteractive: {
238
- DEFAULT: "purple.500/purpleDeep.400",
246
+ DEFAULT: "purple.500/purple.300",
239
247
  hover: "purple.700/purpleDeep.700",
240
248
  press: "purple.900/purpleDeep.900"
241
249
  },
@@ -255,10 +263,25 @@ const buttonLabel = {
255
263
  press: "green.900/green.100"
256
264
  }
257
265
  };
266
+ const fill = {
267
+ base: "navy.500/navy.50",
268
+ accent: "purple.500/purpleDeep.400",
269
+ secondary: "yellow.500/yellow.400",
270
+ subdued: "navy.100/black.50",
271
+ neutral: "navy.50/black.100",
272
+ negative: "red.150/red.800",
273
+ accentAlt: "purple.100/purpleDeep.900",
274
+ disabled: "navy.300/grey.300",
275
+ error: "red.500/red.500",
276
+ success: "green.500/green.700",
277
+ rental: "blue.300/blue.700",
278
+ blocker: "grey.100/black.200",
279
+ primary: "white/black.1000"
280
+ };
258
281
  const buttonBackground = {
259
282
  selected: "purple.100/purpleDeep.900",
260
- primary: "purple.500/purpleDeep.500",
261
- secondary: "white/black.500",
283
+ primary: "purple.500/purple.400",
284
+ secondary: "white/black.100",
262
285
  tertiary: "white/white",
263
286
  accentAlt: "purple.100/purpleDeep.900",
264
287
  destructive: "red.100/red.900",
@@ -266,12 +289,12 @@ const buttonBackground = {
266
289
  successAlt: "green.100/green.1000",
267
290
  disabled: "navy.100/black.50",
268
291
  primaryInteractive: {
269
- DEFAULT: "purple.500/purpleDeep.500",
292
+ DEFAULT: "purple.500/purple.400",
270
293
  hover: "purple.700/purpleDeep.700",
271
294
  press: "purple.900/purpleDeep.900"
272
295
  },
273
296
  secondaryInteractive: {
274
- DEFAULT: "white/black.500",
297
+ DEFAULT: "white/black.100",
275
298
  hover: "white/black.500",
276
299
  press: "white/black.500"
277
300
  },
@@ -287,25 +310,10 @@ const buttonBackground = {
287
310
  },
288
311
  successAltInteractive: {
289
312
  DEFAULT: "green.100/green.1000",
290
- hover: "green.120/green.900",
291
- press: "green.150/green.1000"
313
+ hover: "green.300/green.900",
314
+ press: "green.400/green.1000"
292
315
  }
293
316
  };
294
- const fill = {
295
- base: "navy.500/grey.50",
296
- subdued: "navy.100/black.50",
297
- secondary: "yellow.500/yellow.500",
298
- accent: "purple.500/purpleDeep.400",
299
- accentAlt: "purple.100/purpleDeep.900",
300
- error: "red.500/red.500",
301
- success: "green.500/green.700",
302
- neutral: "navy.50/black.100",
303
- negative: "red.150/red.800",
304
- disabled: "navy.300/grey.300",
305
- rental: "turquoise.100/turquoise.1200",
306
- blocker: "navy.120/black.75",
307
- primary: "white/black.1000"
308
- };
309
317
  const illustrations = {
310
318
  primary: "navy.500/white",
311
319
  secondary: "white/white",
@@ -319,8 +327,8 @@ var _theme = {
319
327
  stroke: stroke,
320
328
  buttonIcon: buttonIcon,
321
329
  buttonLabel: buttonLabel,
322
- buttonBackground: buttonBackground,
323
330
  fill: fill,
331
+ buttonBackground: buttonBackground,
324
332
  illustrations: illustrations
325
333
  };
326
334
 
package/cjs/tokens/theme.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/components/Calendar/CalendarView/CalendarViewMonth.js CHANGED
@@ -34,9 +34,9 @@ const CalendarViewMonth = ({ monthName, monthStart, statusByDate = {}, isSundayF
34
34
  const monthByWeek = useMemo(() => getMonthByWeek(), []);
35
35
  return (React.createElement("div", { className: "cobalt-CalendarView__month" },
36
36
  React.createElement("div", { className: "cobalt-CalendarView__monthName" }, monthName),
37
- monthByWeek.map((week, weekIndex) => (React.createElement("div", { key: weekIndex, className: "cobalt-CalendarView__week" }, week.map((day, dayIndex) => (React.createElement("div", { key: weekIndex + 1 * dayIndex + 1, className: cx("cobalt-CalendarView__day", {
37
+ React.createElement("div", { className: "c-flex c-flex-col c-gap-2xs" }, monthByWeek.map((week, weekIndex) => (React.createElement("div", { key: weekIndex, className: "cobalt-CalendarView__week" }, week.map((day, dayIndex) => (React.createElement("div", { key: weekIndex + 1 * dayIndex + 1, className: cx("cobalt-CalendarView__day", {
38
38
  [`cobalt-CalendarView__day--${day.status}`]: day.status,
39
- }) }, day.date))))))));
39
+ }) }, day.date)))))))));
40
40
  };
41
41
  CalendarViewMonth.displayName = "CalendarViewMonth";
42
42
 
package/components/Calendar/CalendarView/CalendarViewMonth.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CalendarViewMonth.js","sources":["../../../../src/components/Calendar/CalendarView/CalendarViewMonth.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport {\n setDate,\n getISODay,\n getDaysInMonth,\n endOfMonth,\n differenceInCalendarWeeks,\n isPast,\n isToday,\n format,\n} from \"date-fns\"\nimport cx from \"classnames\"\nimport {\n CalendarViewMonthType,\n MonthType,\n CalendarViewDateType,\n DateType,\n} from \"./types\"\n\ntype Props = MonthType\n\nconst CalendarViewMonth = ({\n monthName,\n monthStart,\n statusByDate = {},\n isSundayFirstDayOfWeek = false,\n}: Props) => {\n const getMonthByWeek = (): CalendarViewMonthType => {\n const daysInMonth = getDaysInMonth(monthStart)\n const weeksInMonth =\n differenceInCalendarWeeks(endOfMonth(monthStart), monthStart, {\n weekStartsOn: isSundayFirstDayOfWeek ? 0 : 1,\n }) + 1\n const weekDay = isSundayFirstDayOfWeek\n ? (getISODay(monthStart) % 7) + 1\n : getISODay(monthStart)\n const month: CalendarViewDateType[][] = []\n let cursor = 0\n let date = 0\n\n for (let week = 0; week < weeksInMonth; week++) {\n month[week] = []\n for (let day = 0; day < 7; day++) {\n month[week][day] = { date: null }\n\n if (cursor >= weekDay - 1 && date < daysInMonth) {\n month[week][day].date = ++date as DateType\n\n const currentDate = setDate(monthStart, date)\n\n month[week][day].status =\n isPast(currentDate) && !isToday(currentDate)\n ? \"past\"\n : statusByDate[format(currentDate, \"yyyy-MM-dd\")]\n }\n cursor++\n }\n }\n return month\n }\n\n const monthByWeek = useMemo(() => getMonthByWeek(), [])\n\n return (\n <div className=\"cobalt-CalendarView__month\">\n <div className=\"cobalt-CalendarView__monthName\">{monthName}</div>\n {monthByWeek.map((week, weekIndex) => (\n <div key={weekIndex} className=\"cobalt-CalendarView__week\">\n {week.map((day, dayIndex) => (\n <div\n key={weekIndex + 1 * dayIndex + 1}\n className={cx(\"cobalt-CalendarView__day\", {\n [`cobalt-CalendarView__day--${day.status}`]: day.status,\n })}\n >\n {day.date}\n </div>\n ))}\n </div>\n ))}\n </div>\n )\n}\n\nCalendarViewMonth.displayName = \"CalendarViewMonth\"\n\nexport default CalendarViewMonth\n"],"names":[],"mappings":";;;;AAqBA,MAAM,iBAAiB,GAAG,CAAC,EACzB,SAAS,EACT,UAAU,EACV,YAAY,GAAG,EAAE,EACjB,sBAAsB,GAAG,KAAK,GACxB,KAAI;IACV,MAAM,cAAc,GAAG,MAA4B;AACjD,QAAA,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;QAC9C,MAAM,YAAY,GAChB,yBAAyB,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE;YAC5D,YAAY,EAAE,sBAAsB,GAAG,CAAC,GAAG,CAAC;SAC7C,CAAC,GAAG,CAAC,CAAA;QACR,MAAM,OAAO,GAAG,sBAAsB;cAClC,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;AACjC,cAAE,SAAS,CAAC,UAAU,CAAC,CAAA;QACzB,MAAM,KAAK,GAA6B,EAAE,CAAA;QAC1C,IAAI,MAAM,GAAG,CAAC,CAAA;QACd,IAAI,IAAI,GAAG,CAAC,CAAA;AAEZ,QAAA,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,IAAI,EAAE,EAAE;AAC9C,YAAA,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAA;AAChB,YAAA,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE;AAChC,gBAAA,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;gBAEjC,IAAI,MAAM,IAAI,OAAO,GAAG,CAAC,IAAI,IAAI,GAAG,WAAW,EAAE;oBAC/C,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,EAAE,IAAgB,CAAA;oBAE1C,MAAM,WAAW,GAAG,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;AAE7C,oBAAA,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM;wBACrB,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;AAC1C,8BAAE,MAAM;8BACN,YAAY,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAA;iBACtD;AACD,gBAAA,MAAM,EAAE,CAAA;aACT;SACF;AACD,QAAA,OAAO,KAAK,CAAA;AACd,KAAC,CAAA;AAED,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,cAAc,EAAE,EAAE,EAAE,CAAC,CAAA;AAEvD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA;AACzC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gCAAgC,EAAA,EAAE,SAAS,CAAO;QAChE,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,MAC/B,6BAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,2BAA2B,EAAA,EACvD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,MACtB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,SAAS,GAAG,CAAC,GAAG,QAAQ,GAAG,CAAC,EACjC,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE;gBACxC,CAAC,CAAA,0BAAA,EAA6B,GAAG,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM;AACxD,aAAA,CAAC,EAED,EAAA,GAAG,CAAC,IAAI,CACL,CACP,CAAC,CACE,CACP,CAAC,CACE,EACP;AACH,EAAC;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}
1
+ {"version":3,"file":"CalendarViewMonth.js","sources":["../../../../src/components/Calendar/CalendarView/CalendarViewMonth.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport {\n setDate,\n getISODay,\n getDaysInMonth,\n endOfMonth,\n differenceInCalendarWeeks,\n isPast,\n isToday,\n format,\n} from \"date-fns\"\nimport cx from \"classnames\"\nimport {\n CalendarViewMonthType,\n MonthType,\n CalendarViewDateType,\n DateType,\n} from \"./types\"\n\ntype Props = MonthType\n\nconst CalendarViewMonth = ({\n monthName,\n monthStart,\n statusByDate = {},\n isSundayFirstDayOfWeek = false,\n}: Props) => {\n const getMonthByWeek = (): CalendarViewMonthType => {\n const daysInMonth = getDaysInMonth(monthStart)\n const weeksInMonth =\n differenceInCalendarWeeks(endOfMonth(monthStart), monthStart, {\n weekStartsOn: isSundayFirstDayOfWeek ? 0 : 1,\n }) + 1\n const weekDay = isSundayFirstDayOfWeek\n ? (getISODay(monthStart) % 7) + 1\n : getISODay(monthStart)\n const month: CalendarViewDateType[][] = []\n let cursor = 0\n let date = 0\n\n for (let week = 0; week < weeksInMonth; week++) {\n month[week] = []\n for (let day = 0; day < 7; day++) {\n month[week][day] = { date: null }\n\n if (cursor >= weekDay - 1 && date < daysInMonth) {\n month[week][day].date = ++date as DateType\n\n const currentDate = setDate(monthStart, date)\n\n month[week][day].status =\n isPast(currentDate) && !isToday(currentDate)\n ? \"past\"\n : statusByDate[format(currentDate, \"yyyy-MM-dd\")]\n }\n cursor++\n }\n }\n return month\n }\n\n const monthByWeek = useMemo(() => getMonthByWeek(), [])\n\n return (\n <div className=\"cobalt-CalendarView__month\">\n <div className=\"cobalt-CalendarView__monthName\">{monthName}</div>\n <div className=\"c-flex c-flex-col c-gap-2xs\">\n {monthByWeek.map((week, weekIndex) => (\n <div key={weekIndex} className=\"cobalt-CalendarView__week\">\n {week.map((day, dayIndex) => (\n <div\n key={weekIndex + 1 * dayIndex + 1}\n className={cx(\"cobalt-CalendarView__day\", {\n [`cobalt-CalendarView__day--${day.status}`]: day.status,\n })}\n >\n {day.date}\n </div>\n ))}\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nCalendarViewMonth.displayName = \"CalendarViewMonth\"\n\nexport default CalendarViewMonth\n"],"names":[],"mappings":";;;;AAqBA,MAAM,iBAAiB,GAAG,CAAC,EACzB,SAAS,EACT,UAAU,EACV,YAAY,GAAG,EAAE,EACjB,sBAAsB,GAAG,KAAK,GACxB,KAAI;IACV,MAAM,cAAc,GAAG,MAA4B;AACjD,QAAA,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;QAC9C,MAAM,YAAY,GAChB,yBAAyB,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE;YAC5D,YAAY,EAAE,sBAAsB,GAAG,CAAC,GAAG,CAAC;SAC7C,CAAC,GAAG,CAAC,CAAA;QACR,MAAM,OAAO,GAAG,sBAAsB;cAClC,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;AACjC,cAAE,SAAS,CAAC,UAAU,CAAC,CAAA;QACzB,MAAM,KAAK,GAA6B,EAAE,CAAA;QAC1C,IAAI,MAAM,GAAG,CAAC,CAAA;QACd,IAAI,IAAI,GAAG,CAAC,CAAA;AAEZ,QAAA,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,IAAI,EAAE,EAAE;AAC9C,YAAA,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAA;AAChB,YAAA,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE;AAChC,gBAAA,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;gBAEjC,IAAI,MAAM,IAAI,OAAO,GAAG,CAAC,IAAI,IAAI,GAAG,WAAW,EAAE;oBAC/C,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,EAAE,IAAgB,CAAA;oBAE1C,MAAM,WAAW,GAAG,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;AAE7C,oBAAA,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM;wBACrB,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;AAC1C,8BAAE,MAAM;8BACN,YAAY,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAA;iBACtD;AACD,gBAAA,MAAM,EAAE,CAAA;aACT;SACF;AACD,QAAA,OAAO,KAAK,CAAA;AACd,KAAC,CAAA;AAED,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,cAAc,EAAE,EAAE,EAAE,CAAC,CAAA;AAEvD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA;AACzC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gCAAgC,EAAA,EAAE,SAAS,CAAO;QACjE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,6BAA6B,EACzC,EAAA,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,MAC/B,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,2BAA2B,EACvD,EAAA,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,MACtB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,SAAS,GAAG,CAAC,GAAG,QAAQ,GAAG,CAAC,EACjC,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE;gBACxC,CAAC,CAAA,0BAAA,EAA6B,GAAG,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM;AACxD,aAAA,CAAC,EAED,EAAA,GAAG,CAAC,IAAI,CACL,CACP,CAAC,CACE,CACP,CAAC,CACE,CACF,EACP;AACH,EAAC;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drivy/cobalt",
3
- "version": "0.46.1",
3
+ "version": "0.46.2",
4
4
  "description": "Opinionated design system for Drivy's projects.",
5
5
  "main": "src/index.js",
6
6
  "types": "types/src/index.d.ts",