@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.
Files changed (13) hide show
  1. package/dist/index.js +124 -120
  2. package/foundation.android.d.ts +4 -0
  3. package/foundation.android.js +68 -64
  4. package/foundation.css +51 -45
  5. package/foundation.d.ts +4 -0
  6. package/foundation.ios.d.ts +4 -0
  7. package/foundation.ios.js +68 -64
  8. package/foundation.js +67 -63
  9. package/foundation.native.d.ts +4 -0
  10. package/foundation.native.js +68 -64
  11. package/foundation.scss +68 -64
  12. package/icons/Icon.css +2 -2
  13. package/package.json +2 -2
package/foundation.ios.js CHANGED
@@ -6,67 +6,71 @@ export const tokens = {
6
6
  "border-thick": 2,
7
7
  "border-thicker": 4,
8
8
  "border-thickest": 8,
9
- "color-interactive": "rgb(125, 176, 14)",
10
- "color-interactive--hover": "rgb(81, 114, 9)",
11
- "color-destructive": "rgb(201, 66, 33)",
12
- "color-destructive--hover": "rgb(128, 25, 0)",
13
- "color-interactive--subtle": "rgba(101, 120, 132, 1)",
14
- "color-interactive--subtle--hover": "rgb(66, 78, 86)",
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
15
  "color-disabled": "rgb(181, 181, 181)",
16
16
  "color-disabled--secondary": "rgb(225, 225, 225)",
17
- "color-focus": "rgb(147, 161, 169)",
18
- "color-critical": "rgb(201, 66, 33)",
19
- "color-critical--surface": "rgb(255, 226, 219)",
20
- "color-critical--onSurface": "rgb(128, 25, 0)",
21
- "color-warning": "rgb(221, 195, 15)",
22
- "color-warning--surface": "rgb(250, 246, 219)",
23
- "color-warning--onSurface": "rgb(144, 127, 10)",
24
- "color-success": "rgb(125, 176, 14)",
25
- "color-success--surface": "rgb(236, 243, 219)",
26
- "color-success--onSurface": "rgb(81, 114, 9)",
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
27
  "color-informative": "rgb(60, 162, 224)",
28
- "color-informative--surface": "rgb(226, 241, 250)",
29
- "color-informative--onSurface": "rgb(39, 105, 146)",
30
- "color-inactive": "rgb(77, 105, 116)",
31
- "color-inactive--surface": "rgb(217, 223, 225)",
32
- "color-inactive--onSurface": "rgb(1, 27, 37)",
33
- "color-heading": "rgb(1, 41, 57)",
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
34
  "color-text": "rgb(66, 78, 86)",
35
- "color-text--secondary": "rgb(77, 105, 116)",
35
+ "color-text--secondary": "rgb(78, 105, 116)",
36
36
  "color-text--reverse": "rgba(255, 255, 255, 1)",
37
37
  "color-text--reverse--secondary": "rgb(193, 201, 206)",
38
+ "color-icon": "rgb(1, 40, 55)",
38
39
  "color-surface": "rgba(255, 255, 255, 1)",
39
- "color-surface--hover": "rgb(244, 246, 250)",
40
- "color-surface--active": "rgb(217, 223, 225)",
41
- "color-surface--background": "rgb(238, 240, 242)",
42
- "color-surface--background--hover": "rgb(193, 201, 206)",
43
- "color-surface--reverse": "rgb(1, 41, 57)",
44
- "color-border": "rgb(217, 223, 225)",
45
- "color-border--section": "rgb(1, 41, 57)",
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)",
46
47
  "color-overlay": "rgba(0, 0, 0, 0.32)",
47
48
  "color-overlay--dimmed": "rgba(255, 255, 255, 0.6)",
48
- "color-brand": "rgb(125, 176, 14)",
49
+ "color-brand": "rgb(124, 175, 14)",
49
50
  "color-brand--highlight": "rgb(132, 234, 0)",
50
- "color-request": "rgb(85, 106, 203)",
51
- "color-quote": "rgb(179, 96, 150)",
52
- "color-job": "rgb(187, 197, 32)",
53
- "color-visit": "rgb(125, 176, 14)",
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)",
54
55
  "color-task": "rgb(75, 106, 150)",
55
- "color-event": "rgb(221, 195, 15)",
56
- "color-invoice": "rgb(136, 112, 196)",
57
- "color-payments": "rgb(243, 150, 36)",
58
- "color-client": "rgb(62, 173, 146)",
59
- "color-blue": "rgb(1, 41, 57)",
60
- "color-blue--light": "rgb(77, 105, 116)",
61
- "color-blue--lighter": "rgb(153, 169, 176)",
62
- "color-blue--lightest": "rgb(217, 223, 225)",
63
- "color-blue--dark": "rgb(1, 27, 37)",
64
- "color-green": "rgb(125, 176, 14)",
65
- "color-green--light": "rgb(164, 200, 86)",
66
- "color-green--lighter": "rgb(203, 223, 159)",
67
- "color-green--lightest": "rgb(236, 243, 219)",
68
- "color-green--dark": "rgb(81, 114, 9)",
69
- "color-lime": "rgb(153, 193, 70)",
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(247, 246, 243)",
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)",
70
74
  "color-lime--light": "rgb(184, 212, 126)",
71
75
  "color-lime--lighter": "rgb(214, 230, 181)",
72
76
  "color-lime--lightest": "rgb(240, 246, 227)",
@@ -76,16 +80,16 @@ export const tokens = {
76
80
  "color-yellowGreen--lighter": "rgb(228, 232, 166)",
77
81
  "color-yellowGreen--lightest": "rgb(245, 246, 222)",
78
82
  "color-yellowGreen--dark": "rgb(122, 128, 21)",
79
- "color-yellow": "rgb(221, 195, 15)",
83
+ "color-yellow": "rgb(209, 185, 46)",
80
84
  "color-yellow--light": "rgb(231, 213, 87)",
81
85
  "color-yellow--lighter": "rgb(241, 231, 159)",
82
- "color-yellow--lightest": "rgb(250, 246, 219)",
83
- "color-yellow--dark": "rgb(144, 127, 10)",
84
- "color-red": "rgb(201, 66, 33)",
86
+ "color-yellow--lightest": "rgb(250, 248, 234)",
87
+ "color-yellow--dark": "rgb(91, 79, 6)",
88
+ "color-red": "rgb(199, 20, 0)",
85
89
  "color-red--light": "rgb(233, 141, 119)",
86
90
  "color-red--lighter": "rgb(255, 206, 194)",
87
- "color-red--lightest": "rgb(255, 226, 219)",
88
- "color-red--dark": "rgb(128, 25, 0)",
91
+ "color-red--lightest": "rgb(250, 237, 234)",
92
+ "color-red--dark": "rgb(87, 9, 0)",
89
93
  "color-grey": "rgb(181, 181, 181)",
90
94
  "color-grey--light": "rgb(203, 203, 203)",
91
95
  "color-grey--lighter": "rgb(225, 225, 225)",
@@ -100,8 +104,8 @@ export const tokens = {
100
104
  "color-lightBlue": "rgb(60, 162, 224)",
101
105
  "color-lightBlue--light": "rgb(119, 190, 233)",
102
106
  "color-lightBlue--lighter": "rgb(177, 218, 243)",
103
- "color-lightBlue--lightest": "rgb(226, 241, 250)",
104
- "color-lightBlue--dark": "rgb(39, 105, 146)",
107
+ "color-lightBlue--lightest": "rgb(239, 246, 251)",
108
+ "color-lightBlue--dark": "rgb(17, 66, 85)",
105
109
  "color-purple": "rgb(136, 112, 196)",
106
110
  "color-purple--light": "rgb(172, 155, 214)",
107
111
  "color-purple--lighter": "rgb(207, 198, 231)",
@@ -117,7 +121,7 @@ export const tokens = {
117
121
  "color-teal--lighter": "rgb(178, 222, 211)",
118
122
  "color-teal--lightest": "rgb(226, 243, 239)",
119
123
  "color-teal--dark": "rgb(40, 112, 95)",
120
- "color-orange": "rgb(243, 150, 36)",
124
+ "color-orange": "rgb(227, 142, 38)",
121
125
  "color-orange--light": "rgb(247, 182, 102)",
122
126
  "color-orange--lighter": "rgb(250, 213, 167)",
123
127
  "color-orange--lightest": "rgb(253, 239, 222)",
@@ -141,10 +145,10 @@ export const tokens = {
141
145
  "color-white": "rgba(255, 255, 255, 1)",
142
146
  "color-black--rgb": "0, 0, 0",
143
147
  "color-black": "rgba(0, 0, 0, 1)",
144
- "radius-small": 1,
145
- "radius-base": 2,
146
- "radius-large": 4,
147
- "radius-larger": 8,
148
+ "radius-small": 4,
149
+ "radius-base": 8,
150
+ "radius-large": 16,
151
+ "radius-larger": 24,
148
152
  "radius-circle": 100,
149
153
  "base-unit": 16,
150
154
  "space-minuscule": 1,
@@ -173,7 +177,7 @@ export const tokens = {
173
177
  "height": 1
174
178
  },
175
179
  "shadowOpacity": 0.16,
176
- "shadowRadius": 4,
180
+ "shadowRadius": 16,
177
181
  "elevation": 6
178
182
  },
179
183
  "shadow-high": {
package/foundation.js CHANGED
@@ -6,67 +6,71 @@ export const tokens = {
6
6
  "border-thick": 2,
7
7
  "border-thicker": 4,
8
8
  "border-thickest": 8,
9
- "color-interactive": "rgb(125, 176, 14)",
10
- "color-interactive--hover": "rgb(81, 114, 9)",
11
- "color-destructive": "rgb(201, 66, 33)",
12
- "color-destructive--hover": "rgb(128, 25, 0)",
13
- "color-interactive--subtle": "rgba(101, 120, 132, 1)",
14
- "color-interactive--subtle--hover": "rgb(66, 78, 86)",
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
15
  "color-disabled": "rgb(181, 181, 181)",
16
16
  "color-disabled--secondary": "rgb(225, 225, 225)",
17
- "color-focus": "rgb(147, 161, 169)",
18
- "color-critical": "rgb(201, 66, 33)",
19
- "color-critical--surface": "rgb(255, 226, 219)",
20
- "color-critical--onSurface": "rgb(128, 25, 0)",
21
- "color-warning": "rgb(221, 195, 15)",
22
- "color-warning--surface": "rgb(250, 246, 219)",
23
- "color-warning--onSurface": "rgb(144, 127, 10)",
24
- "color-success": "rgb(125, 176, 14)",
25
- "color-success--surface": "rgb(236, 243, 219)",
26
- "color-success--onSurface": "rgb(81, 114, 9)",
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
27
  "color-informative": "rgb(60, 162, 224)",
28
- "color-informative--surface": "rgb(226, 241, 250)",
29
- "color-informative--onSurface": "rgb(39, 105, 146)",
30
- "color-inactive": "rgb(77, 105, 116)",
31
- "color-inactive--surface": "rgb(217, 223, 225)",
32
- "color-inactive--onSurface": "rgb(1, 27, 37)",
33
- "color-heading": "rgb(1, 41, 57)",
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
34
  "color-text": "rgb(66, 78, 86)",
35
- "color-text--secondary": "rgb(77, 105, 116)",
35
+ "color-text--secondary": "rgb(78, 105, 116)",
36
36
  "color-text--reverse": "rgba(255, 255, 255, 1)",
37
37
  "color-text--reverse--secondary": "rgb(193, 201, 206)",
38
+ "color-icon": "rgb(1, 40, 55)",
38
39
  "color-surface": "rgba(255, 255, 255, 1)",
39
- "color-surface--hover": "rgb(244, 246, 250)",
40
- "color-surface--active": "rgb(217, 223, 225)",
41
- "color-surface--background": "rgb(238, 240, 242)",
42
- "color-surface--background--hover": "rgb(193, 201, 206)",
43
- "color-surface--reverse": "rgb(1, 41, 57)",
44
- "color-border": "rgb(217, 223, 225)",
45
- "color-border--section": "rgb(1, 41, 57)",
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)",
46
47
  "color-overlay": "rgba(0, 0, 0, 0.32)",
47
48
  "color-overlay--dimmed": "rgba(255, 255, 255, 0.6)",
48
- "color-brand": "rgb(125, 176, 14)",
49
+ "color-brand": "rgb(124, 175, 14)",
49
50
  "color-brand--highlight": "rgb(132, 234, 0)",
50
- "color-request": "rgb(85, 106, 203)",
51
- "color-quote": "rgb(179, 96, 150)",
52
- "color-job": "rgb(187, 197, 32)",
53
- "color-visit": "rgb(125, 176, 14)",
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)",
54
55
  "color-task": "rgb(75, 106, 150)",
55
- "color-event": "rgb(221, 195, 15)",
56
- "color-invoice": "rgb(136, 112, 196)",
57
- "color-payments": "rgb(243, 150, 36)",
58
- "color-client": "rgb(62, 173, 146)",
59
- "color-blue": "rgb(1, 41, 57)",
60
- "color-blue--light": "rgb(77, 105, 116)",
61
- "color-blue--lighter": "rgb(153, 169, 176)",
62
- "color-blue--lightest": "rgb(217, 223, 225)",
63
- "color-blue--dark": "rgb(1, 27, 37)",
64
- "color-green": "rgb(125, 176, 14)",
65
- "color-green--light": "rgb(164, 200, 86)",
66
- "color-green--lighter": "rgb(203, 223, 159)",
67
- "color-green--lightest": "rgb(236, 243, 219)",
68
- "color-green--dark": "rgb(81, 114, 9)",
69
- "color-lime": "rgb(153, 193, 70)",
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(247, 246, 243)",
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)",
70
74
  "color-lime--light": "rgb(184, 212, 126)",
71
75
  "color-lime--lighter": "rgb(214, 230, 181)",
72
76
  "color-lime--lightest": "rgb(240, 246, 227)",
@@ -76,16 +80,16 @@ export const tokens = {
76
80
  "color-yellowGreen--lighter": "rgb(228, 232, 166)",
77
81
  "color-yellowGreen--lightest": "rgb(245, 246, 222)",
78
82
  "color-yellowGreen--dark": "rgb(122, 128, 21)",
79
- "color-yellow": "rgb(221, 195, 15)",
83
+ "color-yellow": "rgb(209, 185, 46)",
80
84
  "color-yellow--light": "rgb(231, 213, 87)",
81
85
  "color-yellow--lighter": "rgb(241, 231, 159)",
82
- "color-yellow--lightest": "rgb(250, 246, 219)",
83
- "color-yellow--dark": "rgb(144, 127, 10)",
84
- "color-red": "rgb(201, 66, 33)",
86
+ "color-yellow--lightest": "rgb(250, 248, 234)",
87
+ "color-yellow--dark": "rgb(91, 79, 6)",
88
+ "color-red": "rgb(199, 20, 0)",
85
89
  "color-red--light": "rgb(233, 141, 119)",
86
90
  "color-red--lighter": "rgb(255, 206, 194)",
87
- "color-red--lightest": "rgb(255, 226, 219)",
88
- "color-red--dark": "rgb(128, 25, 0)",
91
+ "color-red--lightest": "rgb(250, 237, 234)",
92
+ "color-red--dark": "rgb(87, 9, 0)",
89
93
  "color-grey": "rgb(181, 181, 181)",
90
94
  "color-grey--light": "rgb(203, 203, 203)",
91
95
  "color-grey--lighter": "rgb(225, 225, 225)",
@@ -100,8 +104,8 @@ export const tokens = {
100
104
  "color-lightBlue": "rgb(60, 162, 224)",
101
105
  "color-lightBlue--light": "rgb(119, 190, 233)",
102
106
  "color-lightBlue--lighter": "rgb(177, 218, 243)",
103
- "color-lightBlue--lightest": "rgb(226, 241, 250)",
104
- "color-lightBlue--dark": "rgb(39, 105, 146)",
107
+ "color-lightBlue--lightest": "rgb(239, 246, 251)",
108
+ "color-lightBlue--dark": "rgb(17, 66, 85)",
105
109
  "color-purple": "rgb(136, 112, 196)",
106
110
  "color-purple--light": "rgb(172, 155, 214)",
107
111
  "color-purple--lighter": "rgb(207, 198, 231)",
@@ -117,7 +121,7 @@ export const tokens = {
117
121
  "color-teal--lighter": "rgb(178, 222, 211)",
118
122
  "color-teal--lightest": "rgb(226, 243, 239)",
119
123
  "color-teal--dark": "rgb(40, 112, 95)",
120
- "color-orange": "rgb(243, 150, 36)",
124
+ "color-orange": "rgb(227, 142, 38)",
121
125
  "color-orange--light": "rgb(247, 182, 102)",
122
126
  "color-orange--lighter": "rgb(250, 213, 167)",
123
127
  "color-orange--lightest": "rgb(253, 239, 222)",
@@ -141,10 +145,10 @@ export const tokens = {
141
145
  "color-white": "rgba(255, 255, 255, 1)",
142
146
  "color-black--rgb": "0, 0, 0",
143
147
  "color-black": "rgba(0, 0, 0, 1)",
144
- "radius-small": 1,
145
- "radius-base": 2,
146
- "radius-large": 4,
147
- "radius-larger": 8,
148
+ "radius-small": 4,
149
+ "radius-base": 8,
150
+ "radius-large": 16,
151
+ "radius-larger": 24,
148
152
  "radius-circle": 100,
149
153
  "base-unit": 16,
150
154
  "space-minuscule": 1,
package/foundation.native.d.ts CHANGED
@@ -35,6 +35,7 @@ export const tokens: {
35
35
  "color-text--secondary": string;
36
36
  "color-text--reverse": string;
37
37
  "color-text--reverse--secondary": string;
38
+ "color-icon": string;
38
39
  "color-surface": string;
39
40
  "color-surface--hover": string;
40
41
  "color-surface--active": string;
@@ -61,6 +62,9 @@ export const tokens: {
61
62
  "color-blue--lighter": string;
62
63
  "color-blue--lightest": string;
63
64
  "color-blue--dark": string;
65
+ "color-taupe": string;
66
+ "color-taupe--light": string;
67
+ "color-taupe--dark": string;
64
68
  "color-green": string;
65
69
  "color-green--light": string;
66
70
  "color-green--lighter": string;
package/foundation.native.js CHANGED
@@ -6,67 +6,71 @@ export const tokens = {
6
6
  "border-thick": 2,
7
7
  "border-thicker": 4,
8
8
  "border-thickest": 8,
9
- "color-interactive": "rgb(125, 176, 14)",
10
- "color-interactive--hover": "rgb(81, 114, 9)",
11
- "color-destructive": "rgb(201, 66, 33)",
12
- "color-destructive--hover": "rgb(128, 25, 0)",
13
- "color-interactive--subtle": "rgba(101, 120, 132, 1)",
14
- "color-interactive--subtle--hover": "rgb(66, 78, 86)",
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
15
  "color-disabled": "rgb(181, 181, 181)",
16
16
  "color-disabled--secondary": "rgb(225, 225, 225)",
17
- "color-focus": "rgb(147, 161, 169)",
18
- "color-critical": "rgb(201, 66, 33)",
19
- "color-critical--surface": "rgb(255, 226, 219)",
20
- "color-critical--onSurface": "rgb(128, 25, 0)",
21
- "color-warning": "rgb(221, 195, 15)",
22
- "color-warning--surface": "rgb(250, 246, 219)",
23
- "color-warning--onSurface": "rgb(144, 127, 10)",
24
- "color-success": "rgb(125, 176, 14)",
25
- "color-success--surface": "rgb(236, 243, 219)",
26
- "color-success--onSurface": "rgb(81, 114, 9)",
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
27
  "color-informative": "rgb(60, 162, 224)",
28
- "color-informative--surface": "rgb(226, 241, 250)",
29
- "color-informative--onSurface": "rgb(39, 105, 146)",
30
- "color-inactive": "rgb(77, 105, 116)",
31
- "color-inactive--surface": "rgb(217, 223, 225)",
32
- "color-inactive--onSurface": "rgb(1, 27, 37)",
33
- "color-heading": "rgb(1, 41, 57)",
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
34
  "color-text": "rgb(66, 78, 86)",
35
- "color-text--secondary": "rgb(77, 105, 116)",
35
+ "color-text--secondary": "rgb(78, 105, 116)",
36
36
  "color-text--reverse": "rgba(255, 255, 255, 1)",
37
37
  "color-text--reverse--secondary": "rgb(193, 201, 206)",
38
+ "color-icon": "rgb(1, 40, 55)",
38
39
  "color-surface": "rgba(255, 255, 255, 1)",
39
- "color-surface--hover": "rgb(244, 246, 250)",
40
- "color-surface--active": "rgb(217, 223, 225)",
41
- "color-surface--background": "rgb(238, 240, 242)",
42
- "color-surface--background--hover": "rgb(193, 201, 206)",
43
- "color-surface--reverse": "rgb(1, 41, 57)",
44
- "color-border": "rgb(217, 223, 225)",
45
- "color-border--section": "rgb(1, 41, 57)",
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)",
46
47
  "color-overlay": "rgba(0, 0, 0, 0.32)",
47
48
  "color-overlay--dimmed": "rgba(255, 255, 255, 0.6)",
48
- "color-brand": "rgb(125, 176, 14)",
49
+ "color-brand": "rgb(124, 175, 14)",
49
50
  "color-brand--highlight": "rgb(132, 234, 0)",
50
- "color-request": "rgb(85, 106, 203)",
51
- "color-quote": "rgb(179, 96, 150)",
52
- "color-job": "rgb(187, 197, 32)",
53
- "color-visit": "rgb(125, 176, 14)",
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)",
54
55
  "color-task": "rgb(75, 106, 150)",
55
- "color-event": "rgb(221, 195, 15)",
56
- "color-invoice": "rgb(136, 112, 196)",
57
- "color-payments": "rgb(243, 150, 36)",
58
- "color-client": "rgb(62, 173, 146)",
59
- "color-blue": "rgb(1, 41, 57)",
60
- "color-blue--light": "rgb(77, 105, 116)",
61
- "color-blue--lighter": "rgb(153, 169, 176)",
62
- "color-blue--lightest": "rgb(217, 223, 225)",
63
- "color-blue--dark": "rgb(1, 27, 37)",
64
- "color-green": "rgb(125, 176, 14)",
65
- "color-green--light": "rgb(164, 200, 86)",
66
- "color-green--lighter": "rgb(203, 223, 159)",
67
- "color-green--lightest": "rgb(236, 243, 219)",
68
- "color-green--dark": "rgb(81, 114, 9)",
69
- "color-lime": "rgb(153, 193, 70)",
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(247, 246, 243)",
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)",
70
74
  "color-lime--light": "rgb(184, 212, 126)",
71
75
  "color-lime--lighter": "rgb(214, 230, 181)",
72
76
  "color-lime--lightest": "rgb(240, 246, 227)",
@@ -76,16 +80,16 @@ export const tokens = {
76
80
  "color-yellowGreen--lighter": "rgb(228, 232, 166)",
77
81
  "color-yellowGreen--lightest": "rgb(245, 246, 222)",
78
82
  "color-yellowGreen--dark": "rgb(122, 128, 21)",
79
- "color-yellow": "rgb(221, 195, 15)",
83
+ "color-yellow": "rgb(209, 185, 46)",
80
84
  "color-yellow--light": "rgb(231, 213, 87)",
81
85
  "color-yellow--lighter": "rgb(241, 231, 159)",
82
- "color-yellow--lightest": "rgb(250, 246, 219)",
83
- "color-yellow--dark": "rgb(144, 127, 10)",
84
- "color-red": "rgb(201, 66, 33)",
86
+ "color-yellow--lightest": "rgb(250, 248, 234)",
87
+ "color-yellow--dark": "rgb(91, 79, 6)",
88
+ "color-red": "rgb(199, 20, 0)",
85
89
  "color-red--light": "rgb(233, 141, 119)",
86
90
  "color-red--lighter": "rgb(255, 206, 194)",
87
- "color-red--lightest": "rgb(255, 226, 219)",
88
- "color-red--dark": "rgb(128, 25, 0)",
91
+ "color-red--lightest": "rgb(250, 237, 234)",
92
+ "color-red--dark": "rgb(87, 9, 0)",
89
93
  "color-grey": "rgb(181, 181, 181)",
90
94
  "color-grey--light": "rgb(203, 203, 203)",
91
95
  "color-grey--lighter": "rgb(225, 225, 225)",
@@ -100,8 +104,8 @@ export const tokens = {
100
104
  "color-lightBlue": "rgb(60, 162, 224)",
101
105
  "color-lightBlue--light": "rgb(119, 190, 233)",
102
106
  "color-lightBlue--lighter": "rgb(177, 218, 243)",
103
- "color-lightBlue--lightest": "rgb(226, 241, 250)",
104
- "color-lightBlue--dark": "rgb(39, 105, 146)",
107
+ "color-lightBlue--lightest": "rgb(239, 246, 251)",
108
+ "color-lightBlue--dark": "rgb(17, 66, 85)",
105
109
  "color-purple": "rgb(136, 112, 196)",
106
110
  "color-purple--light": "rgb(172, 155, 214)",
107
111
  "color-purple--lighter": "rgb(207, 198, 231)",
@@ -117,7 +121,7 @@ export const tokens = {
117
121
  "color-teal--lighter": "rgb(178, 222, 211)",
118
122
  "color-teal--lightest": "rgb(226, 243, 239)",
119
123
  "color-teal--dark": "rgb(40, 112, 95)",
120
- "color-orange": "rgb(243, 150, 36)",
124
+ "color-orange": "rgb(227, 142, 38)",
121
125
  "color-orange--light": "rgb(247, 182, 102)",
122
126
  "color-orange--lighter": "rgb(250, 213, 167)",
123
127
  "color-orange--lightest": "rgb(253, 239, 222)",
@@ -141,10 +145,10 @@ export const tokens = {
141
145
  "color-white": "rgba(255, 255, 255, 1)",
142
146
  "color-black--rgb": "0, 0, 0",
143
147
  "color-black": "rgba(0, 0, 0, 1)",
144
- "radius-small": 1,
145
- "radius-base": 2,
146
- "radius-large": 4,
147
- "radius-larger": 8,
148
+ "radius-small": 4,
149
+ "radius-base": 8,
150
+ "radius-large": 16,
151
+ "radius-larger": 24,
148
152
  "radius-circle": 100,
149
153
  "base-unit": 16,
150
154
  "space-minuscule": 1,
@@ -173,7 +177,7 @@ export const tokens = {
173
177
  "height": 1
174
178
  },
175
179
  "shadowOpacity": 0.16,
176
- "shadowRadius": 4,
180
+ "shadowRadius": 16,
177
181
  "elevation": 6
178
182
  },
179
183
  "shadow-high": {