@jobber/design 0.57.3 → 0.59.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.
package/foundation.js CHANGED
@@ -6,136 +6,154 @@ export const tokens = {
6
6
  "border-thick": 2,
7
7
  "border-thicker": 4,
8
8
  "border-thickest": 8,
9
- "color-interactive": "rgb(50, 130, 28)",
10
- "color-interactive--hover": "rgb(14, 78, 26)",
11
- "color-destructive": "rgb(199, 20, 0)",
12
- "color-destructive--hover": "rgb(87, 9, 0)",
13
- "color-interactive--subtle": "rgb(1, 40, 55)",
14
- "color-interactive--subtle--hover": "rgb(1, 25, 35)",
15
- "color-disabled": "rgb(181, 181, 181)",
16
- "color-disabled--secondary": "rgb(225, 225, 225)",
17
- "color-focus": "rgb(131, 151, 160)",
18
- "color-critical": "rgb(199, 20, 0)",
19
- "color-critical--surface": "rgb(250, 237, 234)",
20
- "color-critical--onSurface": "rgb(87, 9, 0)",
21
- "color-warning": "rgb(209, 185, 46)",
22
- "color-warning--surface": "rgb(250, 248, 234)",
23
- "color-warning--onSurface": "rgb(91, 79, 6)",
24
- "color-success": "rgb(50, 130, 28)",
25
- "color-success--surface": "rgb(241, 247, 238)",
26
- "color-success--onSurface": "rgb(14, 78, 26)",
27
- "color-informative": "rgb(60, 162, 224)",
28
- "color-informative--surface": "rgb(239, 246, 251)",
29
- "color-informative--onSurface": "rgb(17, 66, 85)",
30
- "color-inactive": "rgb(1, 40, 55)",
31
- "color-inactive--surface": "rgb(238, 240, 242)",
32
- "color-inactive--onSurface": "rgb(1, 40, 55)",
33
- "color-heading": "rgb(1, 40, 55)",
34
- "color-text": "rgb(66, 78, 86)",
35
- "color-text--secondary": "rgb(78, 105, 116)",
9
+ "color-interactive": "hsl(107, 58%, 33%)",
10
+ "color-interactive--hover": "hsl(107, 65%, 24%)",
11
+ "color-destructive": "hsl(6, 64%, 51%)",
12
+ "color-destructive--hover": "hsl(6, 100%, 35%)",
13
+ "color-interactive--subtle": "hsl(198, 35%, 21%)",
14
+ "color-interactive--subtle--hover": "hsl(197, 90%, 12%)",
15
+ "color-disabled": "hsl(0, 0%, 72%)",
16
+ "color-disabled--secondary": "hsl(0, 0%, 93%)",
17
+ "color-focus": "hsl(198, 12%, 57%)",
18
+ "color-critical": "hsl(6, 64%, 51%)",
19
+ "color-critical--surface": "hsl(7, 63%, 95%)",
20
+ "color-critical--onSurface": "hsl(6, 100%, 24%)",
21
+ "color-warning": "hsl(51, 64%, 49%)",
22
+ "color-warning--surface": "hsl(52, 64%, 89%)",
23
+ "color-warning--onSurface": "hsl(51, 64%, 24%)",
24
+ "color-success": "hsl(107, 58%, 33%)",
25
+ "color-success--surface": "hsl(109, 28%, 92%)",
26
+ "color-success--onSurface": "hsl(107, 64%, 16%)",
27
+ "color-informative": "hsl(207, 79%, 57%)",
28
+ "color-informative--surface": "hsl(207, 87%, 94%)",
29
+ "color-informative--onSurface": "hsl(207, 61%, 34%)",
30
+ "color-inactive": "hsl(198, 25%, 33%)",
31
+ "color-inactive--surface": "hsl(195, 12%, 94%)",
32
+ "color-inactive--onSurface": "hsl(197, 90%, 12%)",
33
+ "color-heading": "hsl(197, 90%, 12%)",
34
+ "color-text": "hsl(198, 35%, 21%)",
35
+ "color-text--secondary": "hsl(197, 15%, 45%)",
36
36
  "color-text--reverse": "rgba(255, 255, 255, 1)",
37
- "color-text--reverse--secondary": "rgb(193, 201, 206)",
38
- "color-icon": "rgb(1, 40, 55)",
37
+ "color-text--reverse--secondary": "hsl(200, 13%, 87%)",
38
+ "color-icon": "hsl(198, 35%, 21%)",
39
39
  "color-surface": "rgba(255, 255, 255, 1)",
40
- "color-surface--hover": "rgb(241, 239, 233)",
41
- "color-surface--active": "rgb(218, 224, 226)",
42
- "color-surface--background": "rgb(241, 239, 233)",
43
- "color-surface--background--hover": "rgb(231, 229, 217)",
44
- "color-surface--reverse": "rgb(1, 40, 55)",
45
- "color-border": "rgb(218, 224, 226)",
46
- "color-border--section": "rgb(1, 40, 55)",
40
+ "color-surface--hover": "hsl(53, 21%, 93%)",
41
+ "color-surface--background": "hsl(53, 21%, 93%)",
42
+ "color-surface--background--hover": "hsl(51, 17%, 85%)",
43
+ "color-surface--background--subtle": "hsl(45, 20%, 97%)",
44
+ "color-surface--background--subtle--hover": "hsl(51, 17%, 85%)",
45
+ "color-surface--reverse": "hsl(197, 90%, 12%)",
46
+ "color-surface--active": "hsl(51, 17%, 85%)",
47
+ "color-border": "hsl(200, 13%, 87%)",
48
+ "color-border--interactive": "hsl(198, 12%, 57%)",
49
+ "color-border--section": "hsl(197, 90%, 12%)",
47
50
  "color-overlay": "rgba(0, 0, 0, 0.32)",
48
51
  "color-overlay--dimmed": "rgba(255, 255, 255, 0.6)",
49
- "color-brand": "rgb(124, 175, 14)",
50
- "color-brand--highlight": "rgb(132, 234, 0)",
51
- "color-request": "rgb(185, 133, 70)",
52
- "color-quote": "rgb(164, 70, 88)",
53
- "color-job": "rgb(50, 130, 28)",
54
- "color-visit": "rgb(50, 130, 28)",
55
- "color-task": "rgb(75, 106, 150)",
56
- "color-event": "rgb(209, 185, 46)",
57
- "color-invoice": "rgb(49, 98, 144)",
58
- "color-payments": "rgb(49, 98, 144)",
59
- "color-client": "rgb(1, 40, 55)",
60
- "color-blue": "rgb(1, 40, 55)",
61
- "color-blue--light": "rgb(78, 105, 116)",
62
- "color-blue--lighter": "rgb(131, 151, 160)",
63
- "color-blue--lightest": "rgb(218, 224, 226)",
64
- "color-blue--dark": "rgb(1, 25, 35)",
65
- "color-taupe": "rgb(241, 239, 233)",
66
- "color-taupe--light": "rgb(252, 250, 244)",
67
- "color-taupe--dark": "rgb(231, 229, 217)",
68
- "color-green": "rgb(50, 130, 28)",
69
- "color-green--light": "rgb(104, 162, 87)",
70
- "color-green--lighter": "rgb(198, 221, 192)",
71
- "color-green--lightest": "rgb(241, 247, 238)",
72
- "color-green--dark": "rgb(14, 78, 26)",
73
- "color-lime": "rgb(153, 194, 71)",
74
- "color-lime--light": "rgb(184, 212, 126)",
75
- "color-lime--lighter": "rgb(214, 230, 181)",
76
- "color-lime--lightest": "rgb(240, 246, 227)",
77
- "color-lime--dark": "rgb(99, 125, 46)",
78
- "color-yellowGreen": "rgb(187, 197, 32)",
79
- "color-yellowGreen--light": "rgb(207, 214, 99)",
80
- "color-yellowGreen--lighter": "rgb(228, 232, 166)",
81
- "color-yellowGreen--lightest": "rgb(245, 246, 222)",
82
- "color-yellowGreen--dark": "rgb(122, 128, 21)",
83
- "color-yellow": "rgb(209, 185, 46)",
84
- "color-yellow--light": "rgb(231, 213, 87)",
85
- "color-yellow--lighter": "rgb(241, 231, 159)",
86
- "color-yellow--lightest": "rgb(250, 248, 234)",
87
- "color-yellow--dark": "rgb(91, 79, 6)",
88
- "color-red": "rgb(199, 20, 0)",
89
- "color-red--light": "rgb(233, 141, 119)",
90
- "color-red--lighter": "rgb(255, 206, 194)",
91
- "color-red--lightest": "rgb(250, 237, 234)",
92
- "color-red--dark": "rgb(87, 9, 0)",
93
- "color-grey": "rgb(181, 181, 181)",
94
- "color-grey--light": "rgb(203, 203, 203)",
95
- "color-grey--lighter": "rgb(225, 225, 225)",
96
- "color-grey--lightest": "rgb(244, 244, 244)",
97
- "color-grey--dark": "rgb(118, 118, 118)",
52
+ "color-brand": "hsl(79, 85%, 34%)",
53
+ "color-brand--highlight": "hsl(86, 100%, 46%)",
54
+ "color-request": "hsl(33, 71%, 38%)",
55
+ "color-request--surface": "hsl(34, 76%, 92%)",
56
+ "color-request--onSurface": "hsl(33, 72%, 20%)",
57
+ "color-quote": "hsl(348, 40%, 41%)",
58
+ "color-quote--surface": "hsl(347, 33%, 95%)",
59
+ "color-quote--onSurface": "hsl(348, 40%, 27%)",
60
+ "color-job": "hsl(107, 58%, 33%)",
61
+ "color-job--surface": "hsl(109, 28%, 92%)",
62
+ "color-job--onSurface": "hsl(107, 65%, 24%)",
63
+ "color-task": "hsl(206, 61%, 23%)",
64
+ "color-task--surface": "hsl(195, 12%, 94%)",
65
+ "color-task--onSurface": "hsl(198, 35%, 21%)",
66
+ "color-invoice": "hsl(207, 61%, 34%)",
67
+ "color-invoice--surface": "hsl(207, 87%, 94%)",
68
+ "color-invoice--onSurface": "hsl(206, 61%, 23%)",
69
+ "color-visit": "hsl(107, 58%, 33%)",
70
+ "color-visit--surface": "hsl(109, 28%, 92%)",
71
+ "color-visit--onSurface": "hsl(107, 65%, 24%)",
72
+ "color-event": "hsl(51, 64%, 49%)",
73
+ "color-event--surface": "hsl(52, 64%, 89%)",
74
+ "color-event--onSurface": "hsl(51, 64%, 24%)",
75
+ "color-payments": "hsl(207, 61%, 34%)",
76
+ "color-payments--surface": "hsl(207, 87%, 94%)",
77
+ "color-payments--onSurface": "hsl(207, 87%, 94%)",
78
+ "color-client": "hsl(48, 3%, 34%)",
79
+ "color-blue": "hsl(197, 90%, 12%)",
80
+ "color-blue--light": "hsl(198, 25%, 33%)",
81
+ "color-blue--lighter": "hsl(198, 12%, 57%)",
82
+ "color-blue--lightest": "hsl(200, 13%, 87%)",
83
+ "color-blue--dark": "hsl(198, 96%, 9%)",
84
+ "color-taupe": "hsl(53, 21%, 93%)",
85
+ "color-taupe--light": "hsl(45, 20%, 97%)",
86
+ "color-taupe--dark": "hsl(51, 17%, 85%)",
87
+ "color-green": "hsl(107, 58%, 33%)",
88
+ "color-green--light": "hsl(107, 30%, 49%)",
89
+ "color-green--lighter": "hsl(107, 29%, 65%)",
90
+ "color-green--lightest": "hsl(109, 28%, 92%)",
91
+ "color-green--dark": "hsl(107, 64%, 16%)",
92
+ "color-lime": "hsl(79, 85%, 34%)",
93
+ "color-lime--light": "hsl(79, 51%, 51%)",
94
+ "color-lime--lighter": "hsl(79, 51%, 78%)",
95
+ "color-lime--lightest": "hsl(79, 49%, 90%)",
96
+ "color-lime--dark": "hsl(79, 85%, 21%)",
97
+ "color-yellowGreen": "hsl(79, 85%, 34%)",
98
+ "color-yellowGreen--light": "hsl(79, 51%, 51%)",
99
+ "color-yellowGreen--lighter": "hsl(79, 51%, 78%)",
100
+ "color-yellowGreen--lightest": "hsl(79, 49%, 90%)",
101
+ "color-yellowGreen--dark": "hsl(79, 86%, 27%)",
102
+ "color-yellow": "hsl(51, 64%, 49%)",
103
+ "color-yellow--light": "hsl(51, 64%, 77%)",
104
+ "color-yellow--lighter": "hsl(52, 64%, 89%)",
105
+ "color-yellow--lightest": "hsl(49, 67%, 95%)",
106
+ "color-yellow--dark": "hsl(51, 64%, 32%)",
107
+ "color-red": "hsl(6, 64%, 51%)",
108
+ "color-red--light": "hsl(6, 64%, 76%)",
109
+ "color-red--lighter": "hsl(5, 65%, 90%)",
110
+ "color-red--lightest": "hsl(7, 63%, 95%)",
111
+ "color-red--dark": "hsl(6, 100%, 24%)",
112
+ "color-grey": "hsl(0, 0%, 72%)",
113
+ "color-grey--light": "hsl(0, 0%, 87%)",
114
+ "color-grey--lighter": "hsl(0, 0%, 93%)",
115
+ "color-grey--lightest": "hsl(0, 0%, 97%)",
116
+ "color-grey--dark": "hsl(0, 0%, 47%)",
98
117
  "color-greyBlue--rgb": "101, 120, 132",
99
- "color-greyBlue": "rgba(101, 120, 132, 1)",
100
- "color-greyBlue--light": "rgb(147, 161, 169)",
101
- "color-greyBlue--lighter": "rgb(193, 201, 206)",
102
- "color-greyBlue--lightest": "rgb(238, 240, 242)",
103
- "color-greyBlue--dark": "rgb(66, 78, 86)",
104
- "color-lightBlue": "rgb(60, 162, 224)",
105
- "color-lightBlue--light": "rgb(119, 190, 233)",
106
- "color-lightBlue--lighter": "rgb(177, 218, 243)",
107
- "color-lightBlue--lightest": "rgb(239, 246, 251)",
108
- "color-lightBlue--dark": "rgb(17, 66, 85)",
109
- "color-purple": "rgb(136, 112, 196)",
118
+ "color-greyBlue": "hsl(197, 15%, 45%)",
119
+ "color-greyBlue--light": "hsl(198, 12%, 57%)",
120
+ "color-greyBlue--lighter": "hsl(196, 12%, 70%)",
121
+ "color-greyBlue--lightest": "hsl(195, 12%, 94%)",
122
+ "color-greyBlue--dark": "hsl(198, 35%, 21%)",
123
+ "color-lightBlue": "hsl(207, 79%, 57%)",
124
+ "color-lightBlue--light": "hsl(207, 89%, 71%)",
125
+ "color-lightBlue--lighter": "hsl(206, 91%, 87%)",
126
+ "color-lightBlue--lightest": "hsl(207, 87%, 94%)",
127
+ "color-lightBlue--dark": "hsl(207, 61%, 45%)",
128
+ "color-purple": "hsl(348, 40%, 27%)",
110
129
  "color-purple--light": "rgb(172, 155, 214)",
111
130
  "color-purple--lighter": "rgb(207, 198, 231)",
112
131
  "color-purple--lightest": "rgb(237, 234, 246)",
113
- "color-purple--dark": "rgb(88, 73, 127)",
114
- "color-pink": "rgb(179, 96, 150)",
115
- "color-pink--light": "rgb(202, 144, 182)",
116
- "color-pink--lighter": "rgb(225, 191, 213)",
117
- "color-pink--lightest": "rgb(244, 231, 239)",
118
- "color-pink--dark": "rgb(116, 62, 98)",
132
+ "color-purple--dark": "hsl(347, 41%, 18%)",
133
+ "color-pink": "hsl(348, 34%, 53%)",
134
+ "color-pink--light": "hsl(349, 34%, 64%)",
135
+ "color-pink--lighter": "hsl(349, 34%, 75%)",
136
+ "color-pink--lightest": "hsl(347, 33%, 95%)",
137
+ "color-pink--dark": "hsl(348, 40%, 27%)",
119
138
  "color-teal": "rgb(62, 173, 146)",
120
139
  "color-teal--light": "rgb(120, 198, 179)",
121
140
  "color-teal--lighter": "rgb(178, 222, 211)",
122
141
  "color-teal--lightest": "rgb(226, 243, 239)",
123
142
  "color-teal--dark": "rgb(40, 112, 95)",
124
- "color-orange": "rgb(227, 142, 38)",
125
- "color-orange--light": "rgb(247, 182, 102)",
126
- "color-orange--lighter": "rgb(250, 213, 167)",
127
- "color-orange--lightest": "rgb(253, 239, 222)",
128
- "color-orange--dark": "rgb(158, 98, 23)",
129
- "color-brown": "rgb(130, 107, 70)",
130
- "color-brown--light": "rgb(168, 151, 126)",
131
- "color-brown--lighter": "rgb(205, 196, 181)",
132
- "color-brown--lightest": "rgb(236, 233, 227)",
133
- "color-brown--dark": "rgb(85, 70, 46)",
134
- "color-navy": "rgb(75, 106, 150)",
135
- "color-navy--light": "rgb(129, 151, 182)",
136
- "color-navy--lighter": "rgb(183, 195, 213)",
137
- "color-navy--lightest": "rgb(228, 233, 239)",
138
- "color-navy--dark": "rgb(49, 69, 98)",
143
+ "color-orange": "hsl(33, 71%, 48%)",
144
+ "color-orange--light": "hsl(33, 77%, 63%)",
145
+ "color-orange--lighter": "hsl(32, 78%, 84%)",
146
+ "color-orange--lightest": "hsl(34, 76%, 92%)",
147
+ "color-orange--dark": "hsl(33, 71%, 38%)",
148
+ "color-brown": "hsl(33, 71%, 29%)",
149
+ "color-brown--light": "hsl(33, 71%, 38%)",
150
+ "color-brown--lighter": "hsl(51, 17%, 85%)",
151
+ "color-brown--dark": "hsl(33, 72%, 20%)",
152
+ "color-navy": "hsl(207, 61%, 34%)",
153
+ "color-navy--light": "hsl(207, 61%, 45%)",
154
+ "color-navy--lighter": "hsl(200, 13%, 87%)",
155
+ "color-navy--lightest": "hsl(195, 12%, 94%)",
156
+ "color-navy--dark": "hsl(206, 61%, 23%)",
139
157
  "color-indigo": "rgb(85, 106, 203)",
140
158
  "color-indigo--light": "rgb(136, 151, 219)",
141
159
  "color-indigo--lighter": "rgb(187, 195, 234)",
@@ -143,8 +161,110 @@ export const tokens = {
143
161
  "color-indigo--dark": "rgb(55, 69, 132)",
144
162
  "color-white--rgb": "255, 255, 255",
145
163
  "color-white": "rgba(255, 255, 255, 1)",
164
+ "color-base-white": "rgba(255, 255, 255, 1)",
165
+ "color-base-grey--100": "hsl(0, 0%, 97%)",
166
+ "color-base-grey--200": "hsl(0, 0%, 93%)",
167
+ "color-base-grey--300": "hsl(0, 0%, 87%)",
168
+ "color-base-grey--400": "hsl(0, 0%, 72%)",
169
+ "color-base-grey--500": "hsl(0, 0%, 58%)",
170
+ "color-base-grey--600": "hsl(0, 0%, 47%)",
171
+ "color-base-grey--700": "hsl(0, 0%, 35%)",
172
+ "color-base-grey--800": "hsl(0, 0%, 24%)",
173
+ "color-base-grey--900": "hsl(0, 0%, 15%)",
174
+ "color-base-grey--1000": "hsl(0, 0%, 11%)",
146
175
  "color-black--rgb": "0, 0, 0",
147
176
  "color-black": "rgba(0, 0, 0, 1)",
177
+ "color-base-black": "rgba(0, 0, 0, 1)",
178
+ "color-base-taupe--100": "hsl(45, 20%, 97%)",
179
+ "color-base-taupe--200": "hsl(53, 21%, 93%)",
180
+ "color-base-taupe--300": "hsl(51, 17%, 85%)",
181
+ "color-base-taupe--400": "hsl(49, 7%, 70%)",
182
+ "color-base-taupe--500": "hsl(47, 4%, 57%)",
183
+ "color-base-taupe--600": "hsl(43, 3%, 46%)",
184
+ "color-base-taupe--700": "hsl(48, 3%, 34%)",
185
+ "color-base-taupe--800": "hsl(40, 3%, 23%)",
186
+ "color-base-taupe--900": "hsl(30, 3%, 15%)",
187
+ "color-base-taupe--1000": "hsl(30, 4%, 11%)",
188
+ "color-base-red--100": "hsl(10, 60%, 98%)",
189
+ "color-base-red--200": "hsl(7, 63%, 95%)",
190
+ "color-base-red--300": "hsl(5, 65%, 90%)",
191
+ "color-base-red--400": "hsl(6, 64%, 76%)",
192
+ "color-base-red--500": "hsl(6, 64%, 65%)",
193
+ "color-base-red--600": "hsl(6, 64%, 51%)",
194
+ "color-base-red--700": "hsl(6, 100%, 35%)",
195
+ "color-base-red--800": "hsl(6, 100%, 24%)",
196
+ "color-base-red--900": "hsl(6, 100%, 16%)",
197
+ "color-base-red--1000": "hsl(6, 100%, 12%)",
198
+ "color-base-green--100": "hsl(108, 29%, 97%)",
199
+ "color-base-green--200": "hsl(109, 28%, 92%)",
200
+ "color-base-green--300": "hsl(106, 28%, 85%)",
201
+ "color-base-green--400": "hsl(107, 29%, 65%)",
202
+ "color-base-green--500": "hsl(107, 30%, 49%)",
203
+ "color-base-green--600": "hsl(107, 58%, 33%)",
204
+ "color-base-green--700": "hsl(107, 65%, 24%)",
205
+ "color-base-green--800": "hsl(107, 64%, 16%)",
206
+ "color-base-green--900": "hsl(108, 63%, 11%)",
207
+ "color-base-green--1000": "hsl(108, 64%, 8%)",
208
+ "color-base-blue--100": "hsl(210, 17%, 98%)",
209
+ "color-base-blue--200": "hsl(195, 12%, 94%)",
210
+ "color-base-blue--300": "hsl(200, 13%, 87%)",
211
+ "color-base-blue--400": "hsl(196, 12%, 70%)",
212
+ "color-base-blue--500": "hsl(198, 12%, 57%)",
213
+ "color-base-blue--600": "hsl(197, 15%, 45%)",
214
+ "color-base-blue--700": "hsl(198, 25%, 33%)",
215
+ "color-base-blue--800": "hsl(198, 35%, 21%)",
216
+ "color-base-blue--900": "hsl(197, 90%, 12%)",
217
+ "color-base-blue--1000": "hsl(198, 96%, 9%)",
218
+ "color-base-yellow--100": "hsl(49, 67%, 95%)",
219
+ "color-base-yellow--200": "hsl(52, 64%, 89%)",
220
+ "color-base-yellow--300": "hsl(51, 64%, 77%)",
221
+ "color-base-yellow--400": "hsl(51, 64%, 49%)",
222
+ "color-base-yellow--500": "hsl(51, 64%, 40%)",
223
+ "color-base-yellow--600": "hsl(51, 64%, 32%)",
224
+ "color-base-yellow--700": "hsl(51, 64%, 24%)",
225
+ "color-base-yellow--800": "hsl(51, 64%, 16%)",
226
+ "color-base-yellow--900": "hsl(51, 63%, 11%)",
227
+ "color-base-yellow--1000": "hsl(50, 64%, 8%)",
228
+ "color-base-lime--100": "hsl(80, 53%, 97%)",
229
+ "color-base-lime--200": "hsl(79, 49%, 90%)",
230
+ "color-base-lime--300": "hsl(79, 51%, 78%)",
231
+ "color-base-lime--400": "hsl(79, 51%, 51%)",
232
+ "color-base-lime--500": "hsl(79, 85%, 34%)",
233
+ "color-base-lime--600": "hsl(79, 86%, 27%)",
234
+ "color-base-lime--700": "hsl(79, 85%, 21%)",
235
+ "color-base-lime--800": "hsl(79, 86%, 14%)",
236
+ "color-base-lime--900": "hsl(78, 87%, 9%)",
237
+ "color-base-lime--1000": "hsl(79, 82%, 7%)",
238
+ "color-base-lightBlue--100": "hsl(205, 86%, 97%)",
239
+ "color-base-lightBlue--200": "hsl(207, 87%, 94%)",
240
+ "color-base-lightBlue--300": "hsl(206, 91%, 87%)",
241
+ "color-base-lightBlue--400": "hsl(207, 89%, 71%)",
242
+ "color-base-lightBlue--500": "hsl(207, 79%, 57%)",
243
+ "color-base-lightBlue--600": "hsl(207, 61%, 45%)",
244
+ "color-base-lightBlue--700": "hsl(207, 61%, 34%)",
245
+ "color-base-lightBlue--800": "hsl(206, 61%, 23%)",
246
+ "color-base-lightBlue--900": "hsl(207, 61%, 15%)",
247
+ "color-base-lightBlue--1000": "hsl(207, 60%, 11%)",
248
+ "color-base-pink--100": "hsl(345, 40%, 98%)",
249
+ "color-base-pink--200": "hsl(347, 33%, 95%)",
250
+ "color-base-pink--300": "hsl(348, 36%, 89%)",
251
+ "color-base-pink--400": "hsl(349, 34%, 75%)",
252
+ "color-base-pink--500": "hsl(349, 34%, 64%)",
253
+ "color-base-pink--600": "hsl(348, 34%, 53%)",
254
+ "color-base-pink--700": "hsl(348, 40%, 41%)",
255
+ "color-base-pink--800": "hsl(348, 40%, 27%)",
256
+ "color-base-pink--900": "hsl(347, 41%, 18%)",
257
+ "color-base-pink--1000": "hsl(349, 40%, 13%)",
258
+ "color-base-orange--100": "hsl(36, 71%, 97%)",
259
+ "color-base-orange--200": "hsl(34, 76%, 92%)",
260
+ "color-base-orange--300": "hsl(32, 78%, 84%)",
261
+ "color-base-orange--400": "hsl(33, 77%, 63%)",
262
+ "color-base-orange--500": "hsl(33, 71%, 48%)",
263
+ "color-base-orange--600": "hsl(33, 71%, 38%)",
264
+ "color-base-orange--700": "hsl(33, 71%, 29%)",
265
+ "color-base-orange--800": "hsl(33, 72%, 20%)",
266
+ "color-base-orange--900": "hsl(33, 72%, 13%)",
267
+ "color-base-orange--1000": "hsl(33, 70%, 9%)",
148
268
  "radius-small": 4,
149
269
  "radius-base": 8,
150
270
  "radius-large": 16,
@@ -38,24 +38,43 @@ export const tokens: {
38
38
  "color-icon": string;
39
39
  "color-surface": string;
40
40
  "color-surface--hover": string;
41
- "color-surface--active": string;
42
41
  "color-surface--background": string;
43
42
  "color-surface--background--hover": string;
43
+ "color-surface--background--subtle": string;
44
+ "color-surface--background--subtle--hover": string;
44
45
  "color-surface--reverse": string;
46
+ "color-surface--active": string;
45
47
  "color-border": string;
48
+ "color-border--interactive": string;
46
49
  "color-border--section": string;
47
50
  "color-overlay": string;
48
51
  "color-overlay--dimmed": string;
49
52
  "color-brand": string;
50
53
  "color-brand--highlight": string;
51
54
  "color-request": string;
55
+ "color-request--surface": string;
56
+ "color-request--onSurface": string;
52
57
  "color-quote": string;
58
+ "color-quote--surface": string;
59
+ "color-quote--onSurface": string;
53
60
  "color-job": string;
54
- "color-visit": string;
61
+ "color-job--surface": string;
62
+ "color-job--onSurface": string;
55
63
  "color-task": string;
56
- "color-event": string;
64
+ "color-task--surface": string;
65
+ "color-task--onSurface": string;
57
66
  "color-invoice": string;
67
+ "color-invoice--surface": string;
68
+ "color-invoice--onSurface": string;
69
+ "color-visit": string;
70
+ "color-visit--surface": string;
71
+ "color-visit--onSurface": string;
72
+ "color-event": string;
73
+ "color-event--surface": string;
74
+ "color-event--onSurface": string;
58
75
  "color-payments": string;
76
+ "color-payments--surface": string;
77
+ "color-payments--onSurface": string;
59
78
  "color-client": string;
60
79
  "color-blue": string;
61
80
  "color-blue--light": string;
@@ -129,7 +148,6 @@ export const tokens: {
129
148
  "color-brown": string;
130
149
  "color-brown--light": string;
131
150
  "color-brown--lighter": string;
132
- "color-brown--lightest": string;
133
151
  "color-brown--dark": string;
134
152
  "color-navy": string;
135
153
  "color-navy--light": string;
@@ -143,8 +161,110 @@ export const tokens: {
143
161
  "color-indigo--dark": string;
144
162
  "color-white--rgb": string;
145
163
  "color-white": string;
164
+ "color-base-white": string;
165
+ "color-base-grey--100": string;
166
+ "color-base-grey--200": string;
167
+ "color-base-grey--300": string;
168
+ "color-base-grey--400": string;
169
+ "color-base-grey--500": string;
170
+ "color-base-grey--600": string;
171
+ "color-base-grey--700": string;
172
+ "color-base-grey--800": string;
173
+ "color-base-grey--900": string;
174
+ "color-base-grey--1000": string;
146
175
  "color-black--rgb": string;
147
176
  "color-black": string;
177
+ "color-base-black": string;
178
+ "color-base-taupe--100": string;
179
+ "color-base-taupe--200": string;
180
+ "color-base-taupe--300": string;
181
+ "color-base-taupe--400": string;
182
+ "color-base-taupe--500": string;
183
+ "color-base-taupe--600": string;
184
+ "color-base-taupe--700": string;
185
+ "color-base-taupe--800": string;
186
+ "color-base-taupe--900": string;
187
+ "color-base-taupe--1000": string;
188
+ "color-base-red--100": string;
189
+ "color-base-red--200": string;
190
+ "color-base-red--300": string;
191
+ "color-base-red--400": string;
192
+ "color-base-red--500": string;
193
+ "color-base-red--600": string;
194
+ "color-base-red--700": string;
195
+ "color-base-red--800": string;
196
+ "color-base-red--900": string;
197
+ "color-base-red--1000": string;
198
+ "color-base-green--100": string;
199
+ "color-base-green--200": string;
200
+ "color-base-green--300": string;
201
+ "color-base-green--400": string;
202
+ "color-base-green--500": string;
203
+ "color-base-green--600": string;
204
+ "color-base-green--700": string;
205
+ "color-base-green--800": string;
206
+ "color-base-green--900": string;
207
+ "color-base-green--1000": string;
208
+ "color-base-blue--100": string;
209
+ "color-base-blue--200": string;
210
+ "color-base-blue--300": string;
211
+ "color-base-blue--400": string;
212
+ "color-base-blue--500": string;
213
+ "color-base-blue--600": string;
214
+ "color-base-blue--700": string;
215
+ "color-base-blue--800": string;
216
+ "color-base-blue--900": string;
217
+ "color-base-blue--1000": string;
218
+ "color-base-yellow--100": string;
219
+ "color-base-yellow--200": string;
220
+ "color-base-yellow--300": string;
221
+ "color-base-yellow--400": string;
222
+ "color-base-yellow--500": string;
223
+ "color-base-yellow--600": string;
224
+ "color-base-yellow--700": string;
225
+ "color-base-yellow--800": string;
226
+ "color-base-yellow--900": string;
227
+ "color-base-yellow--1000": string;
228
+ "color-base-lime--100": string;
229
+ "color-base-lime--200": string;
230
+ "color-base-lime--300": string;
231
+ "color-base-lime--400": string;
232
+ "color-base-lime--500": string;
233
+ "color-base-lime--600": string;
234
+ "color-base-lime--700": string;
235
+ "color-base-lime--800": string;
236
+ "color-base-lime--900": string;
237
+ "color-base-lime--1000": string;
238
+ "color-base-lightBlue--100": string;
239
+ "color-base-lightBlue--200": string;
240
+ "color-base-lightBlue--300": string;
241
+ "color-base-lightBlue--400": string;
242
+ "color-base-lightBlue--500": string;
243
+ "color-base-lightBlue--600": string;
244
+ "color-base-lightBlue--700": string;
245
+ "color-base-lightBlue--800": string;
246
+ "color-base-lightBlue--900": string;
247
+ "color-base-lightBlue--1000": string;
248
+ "color-base-pink--100": string;
249
+ "color-base-pink--200": string;
250
+ "color-base-pink--300": string;
251
+ "color-base-pink--400": string;
252
+ "color-base-pink--500": string;
253
+ "color-base-pink--600": string;
254
+ "color-base-pink--700": string;
255
+ "color-base-pink--800": string;
256
+ "color-base-pink--900": string;
257
+ "color-base-pink--1000": string;
258
+ "color-base-orange--100": string;
259
+ "color-base-orange--200": string;
260
+ "color-base-orange--300": string;
261
+ "color-base-orange--400": string;
262
+ "color-base-orange--500": string;
263
+ "color-base-orange--600": string;
264
+ "color-base-orange--700": string;
265
+ "color-base-orange--800": string;
266
+ "color-base-orange--900": string;
267
+ "color-base-orange--1000": string;
148
268
  "radius-small": number;
149
269
  "radius-base": number;
150
270
  "radius-large": number;