@drivy/cobalt 0.46.1 → 0.46.3

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 (28) hide show
  1. package/cjs/tokens/palette.js +71 -43
  2. package/cjs/tokens/palette.js.map +1 -1
  3. package/cjs/tokens/theme.js +142 -134
  4. package/cjs/tokens/theme.js.map +1 -1
  5. package/cjs/tokens/zIndexes.js +5 -0
  6. package/cjs/tokens/zIndexes.js.map +1 -1
  7. package/components/Calendar/CalendarView/CalendarViewMonth.js +2 -2
  8. package/components/Calendar/CalendarView/CalendarViewMonth.js.map +1 -1
  9. package/package.json +1 -1
  10. package/styles/components/Calendar/CalendarView/index.scss +7 -16
  11. package/styles/components/Icon/iconColors.scss +30 -26
  12. package/styles/components/Sidepanel/index.scss +32 -0
  13. package/styles/components.scss +1 -0
  14. package/styles/core/_colors-map.scss +39 -31
  15. package/styles/core/default-theme.scss +74 -66
  16. package/styles/core/palette.scss +69 -33
  17. package/styles/core/theme.scss +206 -190
  18. package/styles/core/z-index.scss +2 -1
  19. package/tokens/palette.js +72 -42
  20. package/tokens/palette.js.map +1 -1
  21. package/tokens/theme.js +142 -134
  22. package/tokens/theme.js.map +1 -1
  23. package/tokens/zIndexes.js +5 -1
  24. package/tokens/zIndexes.js.map +1 -1
  25. package/types/src/components/Icon/index.d.ts +1 -1
  26. package/types/src/components/Sidepanel/index.d.ts +16 -0
  27. package/types/src/tokens/index.d.ts +87 -44
  28. package/utilities.css +289 -181
package/tokens/palette.js CHANGED
@@ -1,22 +1,17 @@
1
- const white = "#FFF";
1
+ const white = "#FFFFFF";
2
2
  const purple = {
3
- "100": "#F6E5F5",
4
- "300": "#CA6BC3",
5
- "400": "#C04FB8",
3
+ "100": "#F8F2F8",
4
+ "200": "#F0E1EE",
5
+ "300": "#DB97D5",
6
+ "400": "#C758BD",
6
7
  "500": "#B01AA7",
7
- "700": "#8D1586",
8
- "900": "#5F1159"
9
- };
10
- const purpleDeep = {
11
- "100": "#F2A6EE",
12
- "300": "#EA71E3",
13
- "400": "#C31DBA",
14
- "500": "#9B1794",
15
- "700": "#73116E",
16
- "900": "#4B0B48"
17
- };
18
- const purpleLight = {
19
- "100": "#FFDCFD"
8
+ "600": "#A6199D",
9
+ "700": "#901588",
10
+ "800": "#75116F",
11
+ "900": "#530C4F",
12
+ "1000": "#3E093B",
13
+ "1100": "#280626",
14
+ "1200": "#160315"
20
15
  };
21
16
  const navy = {
22
17
  "50": "#F1F1F4",
@@ -24,6 +19,7 @@ const navy = {
24
19
  "120": "#CAC7D2",
25
20
  "200": "#BBB8C7",
26
21
  "300": "#7B728E",
22
+ "400": "#554B70",
27
23
  "500": "#362E53",
28
24
  "700": "#261A48",
29
25
  "900": "#0F0429"
@@ -31,30 +27,42 @@ const navy = {
31
27
  const yellow = {
32
28
  "100": "#FFEED1",
33
29
  "300": "#FFDDA3",
30
+ "400": "#FFD387",
34
31
  "500": "#FFC766",
35
32
  "700": "#C59548",
36
33
  "900": "#75592D",
37
34
  "1000": "#3B2E17"
38
35
  };
39
36
  const green = {
40
- "100": "#CDEBCB",
41
- "120": "#BFE5BD",
42
- "150": "#B1E0AE",
37
+ "100": "#F4F9F3",
38
+ "200": "#E5F2E4",
39
+ "300": "#C8E5C6",
40
+ "400": "#93D790",
43
41
  "500": "#5CBF54",
44
42
  "700": "#479D3E",
45
43
  "900": "#2F6D1C",
46
- "1000": "#1B500A"
44
+ "1000": "#1B500A",
45
+ "1100": "#143B05",
46
+ "1200": "#102E03"
47
47
  };
48
48
  const red = {
49
49
  "100": "#FDEDED",
50
- "120": "#FBDADA",
51
- "150": "#F9C8C8",
52
- "200": "#E38C8C",
53
- "400": "#ED4545",
50
+ "120": "#F7E9E9",
51
+ "150": "#EED0D0",
52
+ "200": "#E5B5B5",
53
+ "300": "#DB9494",
54
+ "400": "#D16969",
54
55
  "500": "#C71414",
55
- "700": "#AF1212",
56
- "800": "#764747",
57
- "900": "#3F2424"
56
+ "600": "#B61212",
57
+ "700": "#A21010",
58
+ "800": "#8D0E0E",
59
+ "900": "#730C0C",
60
+ "1000": "#510808",
61
+ "1200": "#4A0707",
62
+ "1300": "#420707",
63
+ "1400": "#390606",
64
+ "1500": "#2F0505",
65
+ "1600": "#210303"
58
66
  };
59
67
  const orange = {
60
68
  "100": "#F1D5B1",
@@ -66,18 +74,38 @@ const black = {
66
74
  "50": "#544F53",
67
75
  "75": "#443F44",
68
76
  "100": "#363036",
77
+ "200": "#2E292E",
69
78
  "300": "#282127",
79
+ "400": "#251D24",
70
80
  "500": "#191218",
71
- "1000": "#000"
81
+ "600": "#0F0A0E",
82
+ "700": "#090609",
83
+ "800": "#030203",
84
+ "1000": "#000000"
72
85
  };
73
86
  const grey = {
74
87
  "50": "#F8F9FA",
75
88
  "100": "#E3E2E3",
89
+ "200": "#C3C1C3",
76
90
  "300": "#A9A6A9",
77
- "500": "#918D91"
91
+ "400": "#9D9A9D",
92
+ "500": "#918D91",
93
+ "600": "#7D787D",
94
+ "700": "#6A676A"
78
95
  };
79
96
  const blue = {
80
- "500": "#79A3F3"
97
+ "100": "#F5F8FF",
98
+ "200": "#E5EDFF",
99
+ "300": "#B7D3FF",
100
+ "400": "#74B0FF",
101
+ "500": "#1F81F3",
102
+ "600": "#185BD1",
103
+ "700": "#1B3B8B",
104
+ "800": "#19255C",
105
+ "900": "#151C38",
106
+ "1000": "#101423",
107
+ "1100": "#0D1016",
108
+ "1200": "#0A0B0F"
81
109
  };
82
110
  const turquoise = {
83
111
  "50": "#ECF9FB",
@@ -93,14 +121,18 @@ const turquoise = {
93
121
  "1200": "#11505E"
94
122
  };
95
123
  const season = {
96
- "100": "#BDFFAC",
97
- "200": "#94EA84",
98
- "300": "#73C865",
99
- "400": "#54A949",
100
- "700": "#0B7011",
101
- "800": "#005100",
102
- "900": "#030",
103
- "1000": "#001900"
124
+ "100": "#A9D4A8",
125
+ "200": "#9FD09E",
126
+ "300": "#7CC27B",
127
+ "400": "#56B654",
128
+ "500": "#24AA1F",
129
+ "600": "#229F1C",
130
+ "700": "#1F931A",
131
+ "800": "#1D8618",
132
+ "900": "#1A7816",
133
+ "1000": "#166612",
134
+ "1100": "#11510F",
135
+ "1200": "#0A3109"
104
136
  };
105
137
  const newPurple = {
106
138
  "200": "#E46FEE",
@@ -113,8 +145,6 @@ const newViolet = {
113
145
  var _palette = {
114
146
  white: white,
115
147
  purple: purple,
116
- purpleDeep: purpleDeep,
117
- purpleLight: purpleLight,
118
148
  navy: navy,
119
149
  yellow: yellow,
120
150
  green: green,
@@ -129,5 +159,5 @@ var _palette = {
129
159
  newViolet: newViolet
130
160
  };
131
161
 
132
- export { black, blue, _palette as default, green, grey, navy, newPurple, newViolet, orange, purple, purpleDeep, purpleLight, red, season, turquoise, white, yellow };
162
+ export { black, blue, _palette as default, green, grey, navy, newPurple, newViolet, orange, purple, red, season, turquoise, white, yellow };
133
163
  //# sourceMappingURL=palette.js.map
package/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/tokens/theme.js CHANGED
@@ -1,41 +1,42 @@
1
1
  const background = {
2
2
  primary: "white/black.500",
3
- secondary: "white/black.300",
4
- accent: "purple.500/purpleDeep.500",
5
- accentAlt: "purple.100/purpleDeep.900",
3
+ secondary: "white/black.400",
4
+ accent: "purple.500/purple.400",
5
+ accentAlt: "purple.200/purple.1000",
6
6
  info: "yellow.100/yellow.1000",
7
7
  error: "red.500/red.500",
8
- errorAlt: "red.100/red.900",
8
+ errorAlt: "red.100/red.1500",
9
9
  success: "green.700/green.700",
10
- successAlt: "green.100/green.1000",
10
+ successAlt: "green.300/green.1200",
11
11
  connect: "newPurple.500/newPurple.200",
12
12
  connectAlt: "turquoise.50/turquoise.900",
13
- keyExchange: "newViolet.500/newViolet.200",
14
- picked: "green.700/green.500",
15
- rideshare: "black.1000/black.1000",
16
13
  driver: "yellow.500/yellow.500",
17
14
  owner: "navy.700/navy.700",
18
- disabled: "navy.100/black.100",
15
+ disabled: "navy.50/black.500",
19
16
  neutral: "navy.100/black.50",
20
17
  neutralAlt: "navy.50/black.100",
21
- seasonLow: "season.100/season.700",
22
- seasonMedium: "season.200/season.800",
23
- seasonHigh: "season.300/season.900",
24
- seasonVeryhigh: "season.400/season.1000",
25
- rental: "turquoise.100/turquoise.1200",
26
- blocker: "navy.100/black.75",
18
+ seasonLow: "season.100/season.300",
19
+ seasonMedium: "season.300/season.600",
20
+ seasonHigh: "season.700/season.900",
21
+ seasonVeryHigh: "season.1100/season.1200",
22
+ rental: "blue.500/blue.700",
23
+ rentalAlt: "blue.300/blue.500",
24
+ blocker: "grey.100/black.200",
25
+ rideshare: "black.1000/black.1000",
26
+ keyExchange: "newViolet.500/newViolet.200",
27
+ picked: "green.700/green.500",
27
28
  base: "navy.900/navy.50",
28
29
  secondaryInteractive: {
29
- DEFAULT: "white/black.300",
30
+ DEFAULT: "white/black.400",
30
31
  hover: "navy.50/black.300"
31
32
  },
32
33
  accentInteractive: {
33
- DEFAULT: "purple.500/purpleDeep.500",
34
- hover: "purple.700/purpleDeep.400"
34
+ DEFAULT: "purple.500/purple.400",
35
+ hover: "purple.600/purple.700"
35
36
  },
36
37
  accentAltInteractive: {
37
- DEFAULT: "purple.100/purpleDeep.900",
38
- hover: "purpleLight.100/purpleDeep.900"
38
+ DEFAULT: "purple.200/purple.1000",
39
+ hover: "purple.200/purple.900"
39
40
  },
40
41
  connectInteractive: {
41
42
  DEFAULT: "newPurple.500/newPurple.200",
@@ -48,141 +49,148 @@ const background = {
48
49
  };
49
50
  const text = {
50
51
  base: "navy.700/grey.100",
51
- subdued: "navy.300/grey.300",
52
- accent: "purple.500/purpleDeep.400",
53
- accentAlt: "purple.500/grey.100",
54
- info: "yellow.900/yellow.300",
55
- infoAlt: "yellow.700/yellow.700",
52
+ subdued: "navy.400/grey.300",
53
+ accent: "purple.500/purple.400",
54
+ accentAlt: "purple.700/purple.200",
55
+ info: "yellow.900/yellow.400",
56
56
  error: "red.500/red.400",
57
- errorAlt: "red.500/red.500",
58
- success: "green.700/green.700",
59
- successAlt: "green.1000/green.100",
60
- warning: "orange.500/orange.300",
57
+ errorAlt: "red.500/red.200",
58
+ success: "green.700/green.400",
59
+ successAlt: "green.900/green.300",
61
60
  connect: "newPurple.500/newPurple.200",
62
61
  connectAlt: "turquoise.900/white",
63
- keyExchange: "newViolet.500/newViolet.200",
64
- picked: "green.700/green.500",
65
- rideshare: "black.1000/white",
66
62
  driver: "navy.700/navy.700",
67
63
  owner: "white/grey.100",
68
- disabled: "navy.200/black.50",
69
- inversed: "white/white",
70
- onAccent: "white/grey.100",
64
+ warning: "orange.500/orange.300",
65
+ infoAlt: "yellow.700/yellow.700",
66
+ disabled: "navy.120/black.50",
67
+ onAccent: "white/black.1000",
71
68
  onRideshare: "white/white",
72
69
  onError: "white/white",
73
70
  onSuccess: "white/white",
74
- onConnect: "white/navy.900",
75
- onKeyExchange: "white/navy.900",
76
- onPicked: "white/navy.900",
71
+ onConnect: "white/black.1000",
72
+ onKeyExchange: "white/black.1000",
73
+ onPicked: "white/black.1000",
74
+ keyExchange: "newViolet.500/newViolet.200",
75
+ picked: "green.700/green.500",
76
+ rideshare: "black.1000/white",
77
77
  onBase: "white/navy.900",
78
+ onSeasonLow: "black.800/black.800",
79
+ onSeasonMedium: "black.800/white",
80
+ onSeasonHigh: "white/white",
81
+ onSeasonVeryHigh: "white/white",
82
+ onRental: "white/white",
83
+ onRentalAlt: "black.300/black.1000",
84
+ inversed: "white/white",
78
85
  baseInteractive: {
79
86
  DEFAULT: "navy.700/grey.100",
80
87
  hover: "navy.900/grey.300"
81
88
  },
82
89
  subduedInteractive: {
83
- DEFAULT: "navy.300/grey.300",
84
- hover: "navy.500/grey.300"
90
+ DEFAULT: "navy.400/grey.300",
91
+ hover: "navy.500/grey.400"
85
92
  },
86
93
  accentInteractive: {
87
- DEFAULT: "purple.500/purpleDeep.400",
88
- hover: "purple.700/purpleDeep.400"
94
+ DEFAULT: "purple.500/purple.400",
95
+ hover: "purple.700/purple.500"
89
96
  },
90
97
  accentAltInteractive: {
91
- DEFAULT: "purple.500/grey.100",
92
- hover: "purple.700/grey.100"
98
+ DEFAULT: "purple.700/purple.200",
99
+ hover: "purple.700/purple.400"
93
100
  }
94
101
  };
95
102
  const icon = {
96
- base: "navy.500/grey.100",
97
- subdued: "navy.300/grey.300",
98
- accent: "purple.500/purpleDeep.400",
99
- accentAlt: "purple.500/grey.100",
100
- info: "yellow.900/yellow.300",
101
- infoAlt: "yellow.500/yellow.700",
103
+ base: "navy.700/grey.100",
104
+ subdued: "navy.400/grey.300",
105
+ accent: "purple.500/purple.400",
106
+ accentAlt: "purple.700/purple.200",
107
+ info: "yellow.900/yellow.400",
102
108
  error: "red.500/red.400",
103
109
  errorAlt: "red.500/red.200",
104
- success: "green.700/green.700",
105
- successAlt: "green.1000/green.100",
106
- warning: "orange.500/orange.300",
110
+ success: "green.700/green.400",
111
+ successAlt: "green.900/green.300",
107
112
  connect: "newPurple.500/newPurple.200",
108
113
  connectAlt: "turquoise.900/turquoise.50",
109
- keyExchange: "newViolet.500/newViolet.200",
110
- picked: "green.700/green.500",
111
- rideshare: "black.1000/white",
112
114
  driver: "navy.700/navy.700",
113
- owner: "white/white",
114
- disabled: "navy.200/black.50",
115
- disabledAlt: "navy.300/grey.500",
116
- inversed: "white/white",
117
- onAccent: "white/white",
115
+ owner: "white/grey.100",
116
+ warning: "orange.500/orange.300",
117
+ infoAlt: "yellow.500/yellow.700",
118
+ disabled: "navy.200/black.75",
119
+ onAccent: "white/black.1000",
118
120
  onRideshare: "white/white",
119
121
  onError: "white/white",
120
122
  onSuccess: "white/white",
121
- onConnect: "white/navy.900",
122
- onKeyExchange: "white/navy.900",
123
- onPicked: "white/navy.900",
123
+ onConnect: "white/black.1000",
124
+ onKeyExchange: "white/black.1000",
125
+ onPicked: "white/black.1000",
126
+ keyExchange: "newViolet.500/newViolet.200",
127
+ picked: "green.700/green.500",
128
+ rideshare: "black.1000/white",
124
129
  onBase: "white/navy.900",
130
+ disabledAlt: "navy.120/black.50",
131
+ onRental: "white/white",
132
+ inversed: "white/white",
125
133
  baseInteractive: {
126
- DEFAULT: "navy.500/grey.100",
127
- hover: "navy.700/grey.100"
134
+ DEFAULT: "navy.700/grey.100",
135
+ hover: "navy.900/grey.200"
128
136
  },
129
137
  subduedInteractive: {
130
- DEFAULT: "navy.300/grey.300",
131
- hover: "navy.500/grey.300"
138
+ DEFAULT: "navy.400/grey.300",
139
+ hover: "navy.500/grey.400"
132
140
  },
133
141
  accentInteractive: {
134
- DEFAULT: "purple.500/purpleDeep.400",
135
- hover: "purple.700/purpleDeep.400"
142
+ DEFAULT: "purple.500/purple.400",
143
+ hover: "purple.700/purple.500"
136
144
  },
137
145
  accentAltInteractive: {
138
- DEFAULT: "purple.500/grey.100",
139
- hover: "purple.700/grey.100"
146
+ DEFAULT: "purple.700/purple.200",
147
+ hover: "purple.700/purple.400"
140
148
  }
141
149
  };
142
150
  const stroke = {
143
- base: "navy.100/black.50",
151
+ base: "navy.100/black.100",
144
152
  subdued: "navy.50/black.100",
145
- strong: "navy.300/navy.200",
146
- accent: "purple.500/purpleDeep.500",
147
- accentAlt: "purple.300/purpleDeep.400",
148
- error: "red.500/red.200",
149
- errorAlt: "red.500/red.200",
153
+ accent: "purple.500/purple.400",
154
+ accentAlt: "purple.600/purple.400",
150
155
  success: "green.500/green.700",
151
156
  successAlt: "green.500/green.700",
152
- connect: "newPurple.500/newPurple.200",
153
- keyExchange: "newViolet.500/newViolet.200",
154
- picked: "green.700/green.500",
155
- rideshare: "black.1000/white",
156
- rental: "turquoise.500/turquoise.500",
157
- blocker: "navy.300/grey.300",
157
+ error: "red.500/red.400",
158
+ errorAlt: "red.500/red.200",
159
+ strong: "grey.300/grey.700",
158
160
  onAccent: "white/grey.100",
161
+ rental: "blue.700/blue.500",
162
+ blocker: "grey.200/black.50",
159
163
  onError: "white/white",
160
164
  onSuccess: "white/white",
161
- onConnect: "white/black.1000",
162
- onPicked: "white/black.1000",
163
- onKeyExchange: "white/black.1000",
165
+ connect: "newPurple.500/newPurple.200",
166
+ keyExchange: "newViolet.500/newViolet.200",
167
+ picked: "green.700/green.500",
168
+ onConnect: "white/black.75",
169
+ onKeyExchange: "white/black.75",
170
+ onPicked: "white/black.75",
164
171
  onRideshare: "white/black.1000",
165
- onBase: "white/black.1000",
172
+ rideshare: "black.1000/white",
173
+ onBase: "white/black.600",
166
174
  baseInteractive: {
167
- DEFAULT: "navy.100/black.50",
168
- hover: "navy.300/purpleDeep.400",
169
- press: "navy.500/purpleDeep.400"
175
+ DEFAULT: "navy.100/black.100",
176
+ hover: "navy.300/black.300",
177
+ press: "navy.500/black.500"
170
178
  },
171
179
  accentInteractive: {
172
- DEFAULT: "purple.500/purpleDeep.500",
173
- hover: "purple.700/purpleDeep.400",
174
- press: "purple.900/purpleDeep.400"
180
+ DEFAULT: "purple.500/purple.400",
181
+ hover: "purple.700/purple.600",
182
+ press: "purple.900/purple.800"
175
183
  },
176
184
  strongInteractive: {
177
- DEFAULT: "navy.300/navy.200",
178
- hover: "navy.500/purpleDeep.400",
179
- press: "navy.700/purpleDeep.400"
185
+ DEFAULT: "grey.300/grey.700",
186
+ hover: "grey.400/black.50",
187
+ press: "grey.500/black.100"
180
188
  }
181
189
  };
182
190
  const buttonIcon = {
183
191
  selected: "purple.500/grey.100",
184
- primary: "white/grey.100",
185
- secondary: "purple.500/purpleDeep.400",
192
+ primary: "white/black.1000",
193
+ secondary: "purple.500/purple.300",
186
194
  tertiary: "purple.500/white",
187
195
  destructive: "red.500/red.200",
188
196
  success: "white/green.100",
@@ -190,19 +198,19 @@ const buttonIcon = {
190
198
  disabled: "navy.300/grey.300",
191
199
  accentAlt: "purple.500/grey.100",
192
200
  primaryInteractive: {
193
- DEFAULT: "white/grey.100",
194
- hover: "white/white",
195
- press: "white/white"
201
+ DEFAULT: "white/black.1000",
202
+ hover: "white/black.1000",
203
+ press: "white/black.1000"
196
204
  },
197
205
  secondaryInteractive: {
198
- DEFAULT: "purple.500/purpleDeep.400",
199
- hover: "purple.700/purpleDeep.700",
200
- press: "purple.900/purpleDeep.900"
206
+ DEFAULT: "purple.500/purple.300",
207
+ hover: "purple.500/purple.300",
208
+ press: "purple.900/purple.900"
201
209
  },
202
210
  tertiaryInteractive: {
203
211
  DEFAULT: "purple.500/white",
204
- hover: "purple.700/purpleDeep.700",
205
- press: "purple.900/purpleDeep.900"
212
+ hover: "purple.500/white",
213
+ press: "purple.900/purple.1000"
206
214
  },
207
215
  destructiveInteractive: {
208
216
  DEFAULT: "red.500/red.200",
@@ -217,8 +225,8 @@ const buttonIcon = {
217
225
  };
218
226
  const buttonLabel = {
219
227
  selected: "purple.500/grey.100",
220
- primary: "white/grey.100",
221
- secondary: "purple.500/purpleDeep.400",
228
+ primary: "white/black.1000",
229
+ secondary: "purple.500/purple.300",
222
230
  tertiary: "purple.500/white",
223
231
  disabled: "navy.300/grey.300",
224
232
  accentAlt: "purple.500/grey.100",
@@ -226,19 +234,19 @@ const buttonLabel = {
226
234
  success: "white/green.100",
227
235
  successAlt: "green.900/green.100",
228
236
  primaryInteractive: {
229
- DEFAULT: "white/grey.100",
230
- hover: "white/white",
231
- press: "white/white"
237
+ DEFAULT: "white/black.1000",
238
+ hover: "white/black.1000",
239
+ press: "white/black.1000"
232
240
  },
233
241
  secondaryInteractive: {
234
- DEFAULT: "purple.500/purpleDeep.400",
235
- hover: "purple.700/purpleDeep.700",
236
- press: "purple.900/purpleDeep.900"
242
+ DEFAULT: "purple.500/purple.300",
243
+ hover: "purple.700/purple.300",
244
+ press: "purple.900/purple.900"
237
245
  },
238
246
  tertiaryInteractive: {
239
247
  DEFAULT: "purple.500/white",
240
- hover: "purple.700/purpleDeep.700",
241
- press: "purple.900/purpleDeep.900"
248
+ hover: "purple.700/white",
249
+ press: "purple.900/purple.1000"
242
250
  },
243
251
  destructiveInteractive: {
244
252
  DEFAULT: "red.500/red.200",
@@ -253,21 +261,21 @@ const buttonLabel = {
253
261
  };
254
262
  const buttonBackground = {
255
263
  selected: "purple.100/purpleDeep.900",
256
- primary: "purple.500/purpleDeep.500",
257
- secondary: "white/black.500",
264
+ primary: "purple.500/purple.400",
265
+ secondary: "white/black.100",
258
266
  tertiary: "white/white",
259
- accentAlt: "purple.100/purpleDeep.900",
267
+ accentAlt: "purple.100/purple.900",
260
268
  destructive: "red.100/red.900",
261
269
  success: "green.700/green.900",
262
270
  successAlt: "green.100/green.1000",
263
271
  disabled: "navy.100/black.50",
264
272
  primaryInteractive: {
265
- DEFAULT: "purple.500/purpleDeep.500",
266
- hover: "purple.700/purpleDeep.700",
267
- press: "purple.900/purpleDeep.900"
273
+ DEFAULT: "purple.500/purple.400",
274
+ hover: "purple.700/purple.800",
275
+ press: "purple.900/purple.1000"
268
276
  },
269
277
  secondaryInteractive: {
270
- DEFAULT: "white/black.500",
278
+ DEFAULT: "white/black.100",
271
279
  hover: "white/black.500",
272
280
  press: "white/black.500"
273
281
  },
@@ -283,23 +291,23 @@ const buttonBackground = {
283
291
  },
284
292
  successAltInteractive: {
285
293
  DEFAULT: "green.100/green.1000",
286
- hover: "green.120/green.900",
287
- press: "green.150/green.1000"
294
+ hover: "green.300/green.900",
295
+ press: "green.400/green.1000"
288
296
  }
289
297
  };
290
298
  const fill = {
291
- base: "navy.500/grey.50",
299
+ base: "navy.500/navy.50",
300
+ accent: "purple.500/purple.400",
301
+ secondary: "yellow.500/yellow.400",
292
302
  subdued: "navy.100/black.50",
293
- secondary: "yellow.500/yellow.500",
294
- accent: "purple.500/purpleDeep.400",
295
- accentAlt: "purple.100/purpleDeep.900",
296
- error: "red.500/red.500",
297
- success: "green.500/green.700",
298
303
  neutral: "navy.50/black.100",
299
304
  negative: "red.150/red.800",
305
+ accentAlt: "purple.100/purple.900",
300
306
  disabled: "navy.300/grey.300",
301
- rental: "turquoise.100/turquoise.1200",
302
- blocker: "navy.120/black.75",
307
+ error: "red.500/red.500",
308
+ success: "green.500/green.700",
309
+ rental: "blue.300/blue.700",
310
+ blocker: "grey.100/black.200",
303
311
  primary: "white/black.1000"
304
312
  };
305
313
  const illustrations = {
package/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/tokens/zIndexes.js CHANGED
@@ -4,6 +4,7 @@ const above = 1;
4
4
  const dropdown = 10;
5
5
  const nav = 20;
6
6
  const header = 30;
7
+ const sidepanel = 80;
7
8
  const modal = 90;
8
9
  const alert = 100;
9
10
  var _zIndexes = {
@@ -19,6 +20,9 @@ var _zIndexes = {
19
20
  "header-below": 29,
20
21
  header: header,
21
22
  "header-above": 31,
23
+ "sidepanel-below": 79,
24
+ sidepanel: sidepanel,
25
+ "sidepanel-above": 81,
22
26
  "modal-below": 89,
23
27
  modal: modal,
24
28
  "modal-above": 91,
@@ -27,5 +31,5 @@ var _zIndexes = {
27
31
  "alert-above": 101
28
32
  };
29
33
 
30
- export { above, alert, base, below, _zIndexes as default, dropdown, header, modal, nav };
34
+ export { above, alert, base, below, _zIndexes as default, dropdown, header, modal, nav, sidepanel };
31
35
  //# sourceMappingURL=zIndexes.js.map
package/tokens/zIndexes.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"zIndexes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"zIndexes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/types/src/components/Icon/index.d.ts CHANGED
@@ -5,7 +5,7 @@ interface IconsMap {
5
5
  }
6
6
  export declare const BUNDLED_ICONS: IconsMap;
7
7
  export type IconSources = keyof typeof iconTokens.icons;
8
- export declare const iconColors: ("amber" | "blue" | "coral" | "graphite" | "graphiteLight" | "green" | "greenDark" | "greenLight" | "grey" | "greyDark" | "greyLight" | "greyLighter" | "indigo" | "indigoDark" | "purple" | "purpleLight" | "red" | "turquoise" | "white" | "base" | "subdued" | "accent" | "accentAlt" | "info" | "infoAlt" | "error" | "errorAlt" | "success" | "successAlt" | "warning" | "connect" | "connectAlt" | "keyExchange" | "picked" | "rideshare" | "driver" | "owner" | "disabled" | "disabledAlt" | "inversed" | "onAccent" | "onRideshare" | "onError" | "onSuccess" | "onConnect" | "onKeyExchange" | "onPicked" | "onBase" | "baseInteractive" | "subduedInteractive" | "accentInteractive" | "accentAltInteractive")[];
8
+ export declare const iconColors: ("amber" | "blue" | "coral" | "graphite" | "graphiteLight" | "green" | "greenDark" | "greenLight" | "grey" | "greyDark" | "greyLight" | "greyLighter" | "indigo" | "indigoDark" | "purple" | "purpleLight" | "red" | "turquoise" | "white" | "base" | "subdued" | "accent" | "accentAlt" | "info" | "error" | "errorAlt" | "success" | "successAlt" | "connect" | "connectAlt" | "driver" | "owner" | "warning" | "infoAlt" | "disabled" | "onAccent" | "onRideshare" | "onError" | "onSuccess" | "onConnect" | "onKeyExchange" | "onPicked" | "keyExchange" | "picked" | "rideshare" | "onBase" | "disabledAlt" | "onRental" | "inversed" | "baseInteractive" | "subduedInteractive" | "accentInteractive" | "accentAltInteractive")[];
9
9
  export type IconColorsType = (typeof iconColors)[number];
10
10
  export interface IconProps {
11
11
  source: IconSources;