@jobber/design 0.57.1 → 0.57.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.
- package/dist/index.js +124 -120
- package/foundation.android.d.ts +4 -0
- package/foundation.android.js +68 -64
- package/foundation.css +51 -45
- package/foundation.d.ts +4 -0
- package/foundation.ios.d.ts +4 -0
- package/foundation.ios.js +68 -64
- package/foundation.js +67 -63
- package/foundation.native.d.ts +4 -0
- package/foundation.native.js +68 -64
- package/foundation.scss +68 -64
- package/icons/Icon.css +2 -2
- package/package.json +2 -2
package/foundation.scss
CHANGED
|
@@ -2,67 +2,71 @@ $border-base: 1px;
|
|
|
2
2
|
$border-thick: 2px;
|
|
3
3
|
$border-thicker: 4px;
|
|
4
4
|
$border-thickest: 8px;
|
|
5
|
-
$color-interactive: rgb(
|
|
6
|
-
$color-interactive--hover: rgb(
|
|
7
|
-
$color-destructive: rgb(
|
|
8
|
-
$color-destructive--hover: rgb(
|
|
9
|
-
$color-interactive--subtle:
|
|
10
|
-
$color-interactive--subtle--hover: rgb(
|
|
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
11
|
$color-disabled: rgb(181, 181, 181);
|
|
12
12
|
$color-disabled--secondary: rgb(225, 225, 225);
|
|
13
|
-
$color-focus: rgb(
|
|
14
|
-
$color-critical: rgb(
|
|
15
|
-
$color-critical--surface: rgb(
|
|
16
|
-
$color-critical--onSurface: rgb(
|
|
17
|
-
$color-warning: rgb(
|
|
18
|
-
$color-warning--surface: rgb(250,
|
|
19
|
-
$color-warning--onSurface: rgb(
|
|
20
|
-
$color-success: rgb(
|
|
21
|
-
$color-success--surface: rgb(
|
|
22
|
-
$color-success--onSurface: rgb(
|
|
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
23
|
$color-informative: rgb(60, 162, 224);
|
|
24
|
-
$color-informative--surface: rgb(
|
|
25
|
-
$color-informative--onSurface: rgb(
|
|
26
|
-
$color-inactive: rgb(
|
|
27
|
-
$color-inactive--surface: rgb(
|
|
28
|
-
$color-inactive--onSurface: rgb(1,
|
|
29
|
-
$color-heading: rgb(1,
|
|
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
30
|
$color-text: rgb(66, 78, 86);
|
|
31
|
-
$color-text--secondary: rgb(
|
|
31
|
+
$color-text--secondary: rgb(78, 105, 116);
|
|
32
32
|
$color-text--reverse: rgba(255, 255, 255, 1);
|
|
33
33
|
$color-text--reverse--secondary: rgb(193, 201, 206);
|
|
34
|
+
$color-icon: rgb(1, 40, 55);
|
|
34
35
|
$color-surface: rgba(255, 255, 255, 1);
|
|
35
|
-
$color-surface--hover: rgb(
|
|
36
|
-
$color-surface--active: rgb(
|
|
37
|
-
$color-surface--background: rgb(
|
|
38
|
-
$color-surface--background--hover: rgb(
|
|
39
|
-
$color-surface--reverse: rgb(1,
|
|
40
|
-
$color-border: rgb(
|
|
41
|
-
$color-border--section: rgb(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);
|
|
42
43
|
$color-overlay: rgba(0, 0, 0, 0.32);
|
|
43
44
|
$color-overlay--dimmed: rgba(255, 255, 255, 0.6);
|
|
44
|
-
$color-brand: rgb(
|
|
45
|
+
$color-brand: rgb(124, 175, 14);
|
|
45
46
|
$color-brand--highlight: rgb(132, 234, 0);
|
|
46
|
-
$color-request: rgb(
|
|
47
|
-
$color-quote: rgb(
|
|
48
|
-
$color-job: rgb(
|
|
49
|
-
$color-visit: rgb(
|
|
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);
|
|
50
51
|
$color-task: rgb(75, 106, 150);
|
|
51
|
-
$color-event: rgb(
|
|
52
|
-
$color-invoice: rgb(
|
|
53
|
-
$color-payments: rgb(
|
|
54
|
-
$color-client: rgb(
|
|
55
|
-
$color-blue: rgb(1,
|
|
56
|
-
$color-blue--light: rgb(
|
|
57
|
-
$color-blue--lighter: rgb(
|
|
58
|
-
$color-blue--lightest: rgb(
|
|
59
|
-
$color-blue--dark: rgb(1,
|
|
60
|
-
$color-
|
|
61
|
-
$color-
|
|
62
|
-
$color-
|
|
63
|
-
$color-green
|
|
64
|
-
$color-green--
|
|
65
|
-
$color-
|
|
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(247, 246, 243);
|
|
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);
|
|
66
70
|
$color-lime--light: rgb(184, 212, 126);
|
|
67
71
|
$color-lime--lighter: rgb(214, 230, 181);
|
|
68
72
|
$color-lime--lightest: rgb(240, 246, 227);
|
|
@@ -72,16 +76,16 @@ $color-yellowGreen--light: rgb(207, 214, 99);
|
|
|
72
76
|
$color-yellowGreen--lighter: rgb(228, 232, 166);
|
|
73
77
|
$color-yellowGreen--lightest: rgb(245, 246, 222);
|
|
74
78
|
$color-yellowGreen--dark: rgb(122, 128, 21);
|
|
75
|
-
$color-yellow: rgb(
|
|
79
|
+
$color-yellow: rgb(209, 185, 46);
|
|
76
80
|
$color-yellow--light: rgb(231, 213, 87);
|
|
77
81
|
$color-yellow--lighter: rgb(241, 231, 159);
|
|
78
|
-
$color-yellow--lightest: rgb(250,
|
|
79
|
-
$color-yellow--dark: rgb(
|
|
80
|
-
$color-red: rgb(
|
|
82
|
+
$color-yellow--lightest: rgb(250, 248, 234);
|
|
83
|
+
$color-yellow--dark: rgb(91, 79, 6);
|
|
84
|
+
$color-red: rgb(199, 20, 0);
|
|
81
85
|
$color-red--light: rgb(233, 141, 119);
|
|
82
86
|
$color-red--lighter: rgb(255, 206, 194);
|
|
83
|
-
$color-red--lightest: rgb(
|
|
84
|
-
$color-red--dark: rgb(
|
|
87
|
+
$color-red--lightest: rgb(250, 237, 234);
|
|
88
|
+
$color-red--dark: rgb(87, 9, 0);
|
|
85
89
|
$color-grey: rgb(181, 181, 181);
|
|
86
90
|
$color-grey--light: rgb(203, 203, 203);
|
|
87
91
|
$color-grey--lighter: rgb(225, 225, 225);
|
|
@@ -96,8 +100,8 @@ $color-greyBlue--dark: rgb(66, 78, 86);
|
|
|
96
100
|
$color-lightBlue: rgb(60, 162, 224);
|
|
97
101
|
$color-lightBlue--light: rgb(119, 190, 233);
|
|
98
102
|
$color-lightBlue--lighter: rgb(177, 218, 243);
|
|
99
|
-
$color-lightBlue--lightest: rgb(
|
|
100
|
-
$color-lightBlue--dark: rgb(
|
|
103
|
+
$color-lightBlue--lightest: rgb(239, 246, 251);
|
|
104
|
+
$color-lightBlue--dark: rgb(17, 66, 85);
|
|
101
105
|
$color-purple: rgb(136, 112, 196);
|
|
102
106
|
$color-purple--light: rgb(172, 155, 214);
|
|
103
107
|
$color-purple--lighter: rgb(207, 198, 231);
|
|
@@ -113,7 +117,7 @@ $color-teal--light: rgb(120, 198, 179);
|
|
|
113
117
|
$color-teal--lighter: rgb(178, 222, 211);
|
|
114
118
|
$color-teal--lightest: rgb(226, 243, 239);
|
|
115
119
|
$color-teal--dark: rgb(40, 112, 95);
|
|
116
|
-
$color-orange: rgb(
|
|
120
|
+
$color-orange: rgb(227, 142, 38);
|
|
117
121
|
$color-orange--light: rgb(247, 182, 102);
|
|
118
122
|
$color-orange--lighter: rgb(250, 213, 167);
|
|
119
123
|
$color-orange--lightest: rgb(253, 239, 222);
|
|
@@ -137,10 +141,10 @@ $color-white--rgb: 255, 255, 255;
|
|
|
137
141
|
$color-white: rgba(255, 255, 255, 1);
|
|
138
142
|
$color-black--rgb: 0, 0, 0;
|
|
139
143
|
$color-black: rgba(0, 0, 0, 1);
|
|
140
|
-
$radius-small:
|
|
141
|
-
$radius-base:
|
|
142
|
-
$radius-large:
|
|
143
|
-
$radius-larger:
|
|
144
|
+
$radius-small: 4px;
|
|
145
|
+
$radius-base: 8px;
|
|
146
|
+
$radius-large: 16px;
|
|
147
|
+
$radius-larger: 24px;
|
|
144
148
|
$radius-circle: 100%;
|
|
145
149
|
$space-minuscule: 1px;
|
|
146
150
|
$space-smallest: 2px;
|
|
@@ -159,7 +163,7 @@ $shadow-base: 0px 1px 4px 0px
|
|
|
159
163
|
$shadow-high: 0px 16px 16px 0px
|
|
160
164
|
rgba(0, 0, 0, 0.075),
|
|
161
165
|
0px 0px 8px 0px rgba(0, 0, 0, 0.05);
|
|
162
|
-
$shadow-focus: 0px 0px 0px 2px rgba(255, 255, 255, 1) 0px 0px 0px 4px rgb(
|
|
166
|
+
$shadow-focus: 0px 0px 0px 2px rgba(255, 255, 255, 1) 0px 0px 0px 4px rgb(131, 151, 160);
|
|
163
167
|
$timing-quick: 100;
|
|
164
168
|
$timing-base: 200;
|
|
165
169
|
$timing-slow: 300;
|
package/icons/Icon.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.icon {
|
|
2
|
-
fill: var(--color-
|
|
2
|
+
fill: var(--color-icon);
|
|
3
3
|
display: inline-block;
|
|
4
4
|
vertical-align: middle;
|
|
5
5
|
}
|
|
@@ -122,4 +122,4 @@
|
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
/*# sourceMappingURL=data:application/json;base64,
|
|
125
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pY29ucy9JY29uLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLHVCQUF1QjtFQUN2QixxQkFBcUI7RUFDckIsc0JBQXNCO0FBQ3hCOztBQUVBO0VBQ0Usd0JBQXdCO0FBQzFCOztBQUVBO0VBQ0UseUJBQXlCO0FBQzNCOztBQUVBO0VBQ0UseUJBQXlCO0FBQzNCOztBQUVBO0VBQ0UsdUJBQXVCO0FBQ3pCOztBQUVBO0VBQ0UscUJBQXFCO0FBQ3ZCOztBQUVBOzs7O0VBSUUseUJBQXlCO0FBQzNCOztBQUVBOztFQUVFLHNCQUFzQjtBQUN4Qjs7QUFFQTs7RUFFRSx1QkFBdUI7QUFDekI7O0FBRUE7RUFDRSx5QkFBeUI7QUFDM0I7O0FBRUE7RUFDRSx3QkFBd0I7QUFDMUI7O0FBRUE7RUFDRSwwQkFBMEI7QUFDNUI7O0FBRUE7RUFDRSx1QkFBdUI7QUFDekI7O0FBRUE7OztFQUdFLDhCQUE4QjtBQUNoQzs7QUFFQTtFQUNFLDBCQUEwQjtBQUM1Qjs7QUFFQTtFQUNFLDRCQUE0QjtBQUM5Qjs7QUFFQTs7OztFQUlFLDBCQUEwQjtBQUM1Qjs7QUFFQTtFQUNFLDJCQUEyQjtBQUM3Qjs7QUFFQTs7RUFFRSx5QkFBeUI7QUFDM0I7O0FBRUE7RUFDRSw0QkFBNEI7QUFDOUI7O0FBRUEsa0VBQWtFOztBQUVsRTtFQUNFLHNCQUFzQjtBQUN4Qjs7QUFFQTtFQUNFLHFCQUFxQjtBQUN2Qjs7QUFFQTtFQUNFLHNCQUFzQjtBQUN4Qjs7QUFFQTtFQUNFLHNCQUFzQjtFQUN0QixtQ0FBbUM7RUFDbkMsd0JBQXdCO0VBQ3hCLGlDQUFpQztBQUNuQzs7QUFFQTtFQUNFO0lBQ0UsdUJBQXVCO0VBQ3pCOztFQUVBO0lBQ0UseUJBQXlCO0VBQzNCO0FBQ0YiLCJmaWxlIjoiSWNvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuaWNvbiB7XG4gIGZpbGw6IHZhcigtLWNvbG9yLWljb24pO1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG59XG5cbi5sb25nQXJyb3dVcCB7XG4gIHRyYW5zZm9ybTogcm90YXRlKDkwZGVnKTtcbn1cblxuLmxvbmdBcnJvd0Rvd24ge1xuICB0cmFuc2Zvcm06IHJvdGF0ZSgtOTBkZWcpO1xufVxuXG4ubG9uZ0Fycm93UmlnaHQge1xuICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpO1xufVxuXG4ubG9uZ0Fycm93TGVmdCB7XG4gIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xufVxuXG4udGh1bWJzRG93biB7XG4gIHRyYW5zZm9ybTogc2NhbGVZKC0xKTtcbn1cblxuLnBlcnNvbixcbi5jbGllbnRzLFxuLmNvbXBhbnksXG4ucHJvcGVydHkge1xuICBmaWxsOiB2YXIoLS1jb2xvci1jbGllbnQpO1xufVxuXG4uam9iLFxuLmpvYk9uSG9sZCB7XG4gIGZpbGw6IHZhcigtLWNvbG9yLWpvYik7XG59XG5cbi52aXNpdCxcbi5tb3ZlVmlzaXRzIHtcbiAgZmlsbDogdmFyKC0tY29sb3ItbGltZSk7XG59XG5cbi5ldmVudCB7XG4gIGZpbGw6IHZhcigtLWNvbG9yLXllbGxvdyk7XG59XG5cbi5xdW90ZSB7XG4gIGZpbGw6IHZhcigtLWNvbG9yLXF1b3RlKTtcbn1cblxuLnJlcXVlc3Qge1xuICBmaWxsOiB2YXIoLS1jb2xvci1yZXF1ZXN0KTtcbn1cblxuLnRhc2sge1xuICBmaWxsOiB2YXIoLS1jb2xvci1uYXZ5KTtcbn1cblxuLnVzZXJVbmFzc2lnbmVkLFxuLnJlbWluZGVyLFxuLnRyYXNoIHtcbiAgZmlsbDogdmFyKC0tY29sb3ItZGVzdHJ1Y3RpdmUpO1xufVxuXG4uY2hlY2ttYXJrIHtcbiAgZmlsbDogdmFyKC0tY29sb3Itc3VjY2Vzcyk7XG59XG5cbi50aW1lciB7XG4gIGZpbGw6IHZhcigtLWNvbG9yLWxpZ2h0Qmx1ZSk7XG59XG5cbi5pbnZvaWNlLFxuLmludm9pY2VMYXRlcixcbi5zZW5kSW52b2ljZSxcbi5wYWlkSW52b2ljZSB7XG4gIGZpbGw6IHZhcigtLWNvbG9yLWludm9pY2UpO1xufVxuXG4uYmFkSW52b2ljZSB7XG4gIGZpbGw6IHZhcigtLWNvbG9yLWNyaXRpY2FsKTtcbn1cblxuLnBheW1lbnQsXG4uZXhwZW5zZSB7XG4gIGZpbGw6IHZhcigtLWNvbG9yLW9yYW5nZSk7XG59XG5cbi52aWRlbyB7XG4gIGZpbGw6IHZhcigtLWNvbG9yLWxpZ2h0Qmx1ZSk7XG59XG5cbi8qIG5vbi1BdGxhbnRpcyBjb2xvcnMgdG8gbWF0Y2ggYnJhbmQgY29sb3JzIG9mIHRoZXNlIGZpbGUtdHlwZXMgKi9cblxuLmV4Y2VsIHtcbiAgZmlsbDogcmdiKDMxLCAxMTUsIDcxKTtcbn1cblxuLnBkZiB7XG4gIGZpbGw6IHJnYigxOTUsIDI3LCAwKTtcbn1cblxuLndvcmQge1xuICBmaWxsOiByZ2IoNDEsIDg2LCAxNTQpO1xufVxuXG4ucnVubmluZ1RpbWVyIHtcbiAgYW5pbWF0aW9uLWR1cmF0aW9uOiA1cztcbiAgYW5pbWF0aW9uLWl0ZXJhdGlvbi1jb3VudDogaW5maW5pdGU7XG4gIGFuaW1hdGlvbi1uYW1lOiBzcGlubmluZztcbiAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyO1xufVxuXG5Aa2V5ZnJhbWVzIHNwaW5uaW5nIHtcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cblxuICB0byB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcbiAgfVxufVxuIl19 */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/design",
|
|
3
|
-
"version": "0.57.
|
|
3
|
+
"version": "0.57.2",
|
|
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": "
|
|
58
|
+
"gitHead": "8df11e29be0a8a9c5718021bfc9f83092ccddeb6"
|
|
59
59
|
}
|