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