@companycam/slab-web 0.0.2-20

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 (30) hide show
  1. package/dist/bundle.js +1413 -0
  2. package/package.json +62 -0
  3. package/shared/index.js +13 -0
  4. package/shared/legacyStyles.js +78 -0
  5. package/shared/package.json +3 -0
  6. package/shared/styles.js +40 -0
  7. package/shared/theming/CCThemeProvider.js +22 -0
  8. package/shared/theming/CCThemeProvider.native.js +22 -0
  9. package/shared/theming/themes/base.js +43 -0
  10. package/shared/theming/themes/dark_environment.js +51 -0
  11. package/shared/theming/themes/light_environment.js +51 -0
  12. package/shared/theming/useCCTheme.js +16 -0
  13. package/shared/theming/utils.js +23 -0
  14. package/shared/theming/withTheme.js +29 -0
  15. package/shared/tokens/build/css/base.css +362 -0
  16. package/shared/tokens/build/css/dark_environment.css +258 -0
  17. package/shared/tokens/build/css/light_environment.css +258 -0
  18. package/shared/tokens/build/docs/token_docs.js +993 -0
  19. package/shared/tokens/build/js/tokens.js +120 -0
  20. package/shared/tokens/build/json/tokens.json +117 -0
  21. package/shared/tokens/build/scss/tokens.scss +119 -0
  22. package/shared/tokens/config.js +231 -0
  23. package/shared/tokens/properties/color.json +316 -0
  24. package/shared/tokens/properties/size.json +113 -0
  25. package/web/components/Icon/Icon.js +92 -0
  26. package/web/components/Icon/index.js +3 -0
  27. package/web/components/Icon/names.js +3 -0
  28. package/web/components/Icon/utils.js +12 -0
  29. package/web/components/index.js +3 -0
  30. package/web/index.js +6 -0
package/shared/tokens/build/css/light_environment.css ADDED
@@ -0,0 +1,258 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 09 Nov 2022 15:37:56 GMT
4
+ */
5
+
6
+ :root, .light-environment {
7
+ --cc_color_utility_info: #4d5a68;
8
+ --cc_color_utility_info_lighten_10: #5e6a77;
9
+ --cc_color_utility_info_lighten_15: #67727e;
10
+ --cc_color_utility_info_lighten_85: #e4e6e8;
11
+ --cc_color_utility_info_lighten_90: #edeeef;
12
+ --cc_color_utility_info_lighten_95: #f6f6f7;
13
+ --cc_color_utility_info_darken_10: #45515d;
14
+ --cc_color_utility_info_darken_15: #414c58;
15
+
16
+ --cc_color_utility_info_alpha_90: rgba(77,90,104,0.9);
17
+ --cc_color_utility_info_alpha_80: rgba(77,90,104,0.8);
18
+ --cc_color_utility_info_alpha_70: rgba(77,90,104,0.7);
19
+ --cc_color_utility_info_alpha_60: rgba(77,90,104,0.6);
20
+ --cc_color_utility_info_alpha_50: rgba(77,90,104,0.5);
21
+ --cc_color_utility_info_alpha_40: rgba(77,90,104,0.4);
22
+ --cc_color_utility_info_alpha_30: rgba(77,90,104,0.3);
23
+ --cc_color_utility_info_alpha_20: rgba(77,90,104,0.2);
24
+ --cc_color_utility_info_alpha_10: rgba(77,90,104,0.1);
25
+
26
+ --cc_color_background_1: #ffffff;
27
+ --cc_color_background_1_lighten_10: #fff;
28
+ --cc_color_background_1_lighten_15: #fff;
29
+ --cc_color_background_1_lighten_85: #fff;
30
+ --cc_color_background_1_lighten_90: #fff;
31
+ --cc_color_background_1_lighten_95: #fff;
32
+ --cc_color_background_1_darken_10: #e5e5e5;
33
+ --cc_color_background_1_darken_15: #d8d8d8;
34
+
35
+ --cc_color_background_1_alpha_90: rgba(255,255,255,0.9);
36
+ --cc_color_background_1_alpha_80: rgba(255,255,255,0.8);
37
+ --cc_color_background_1_alpha_70: rgba(255,255,255,0.7);
38
+ --cc_color_background_1_alpha_60: rgba(255,255,255,0.6);
39
+ --cc_color_background_1_alpha_50: rgba(255,255,255,0.5);
40
+ --cc_color_background_1_alpha_40: rgba(255,255,255,0.4);
41
+ --cc_color_background_1_alpha_30: rgba(255,255,255,0.3);
42
+ --cc_color_background_1_alpha_20: rgba(255,255,255,0.2);
43
+ --cc_color_background_1_alpha_10: rgba(255,255,255,0.1);
44
+
45
+ --cc_color_background_2: #f5f7fa;
46
+ --cc_color_background_2_lighten_10: #f6f7fa;
47
+ --cc_color_background_2_lighten_15: #f6f8fa;
48
+ --cc_color_background_2_lighten_85: #fdfdfe;
49
+ --cc_color_background_2_lighten_90: #fefefe;
50
+ --cc_color_background_2_lighten_95: #fefefe;
51
+ --cc_color_background_2_darken_10: #dcdee1;
52
+ --cc_color_background_2_darken_15: #d0d1d4;
53
+
54
+ --cc_color_background_2_alpha_90: rgba(245,247,250,0.9);
55
+ --cc_color_background_2_alpha_80: rgba(245,247,250,0.8);
56
+ --cc_color_background_2_alpha_70: rgba(245,247,250,0.7);
57
+ --cc_color_background_2_alpha_60: rgba(245,247,250,0.6);
58
+ --cc_color_background_2_alpha_50: rgba(245,247,250,0.5);
59
+ --cc_color_background_2_alpha_40: rgba(245,247,250,0.4);
60
+ --cc_color_background_2_alpha_30: rgba(245,247,250,0.3);
61
+ --cc_color_background_2_alpha_20: rgba(245,247,250,0.2);
62
+ --cc_color_background_2_alpha_10: rgba(245,247,250,0.1);
63
+
64
+ --cc_color_background_3: #ebeff5;
65
+ --cc_color_background_3_lighten_10: #edf0f6;
66
+ --cc_color_background_3_lighten_15: #eef1f6;
67
+ --cc_color_background_3_lighten_85: #fcfcfd;
68
+ --cc_color_background_3_lighten_90: #fdfdfe;
69
+ --cc_color_background_3_lighten_95: #fefefe;
70
+ --cc_color_background_3_darken_10: #d3d7dc;
71
+ --cc_color_background_3_darken_15: #c7cbd0;
72
+
73
+ --cc_color_background_3_alpha_90: rgba(235,239,245,0.9);
74
+ --cc_color_background_3_alpha_80: rgba(235,239,245,0.8);
75
+ --cc_color_background_3_alpha_70: rgba(235,239,245,0.7);
76
+ --cc_color_background_3_alpha_60: rgba(235,239,245,0.6);
77
+ --cc_color_background_3_alpha_50: rgba(235,239,245,0.5);
78
+ --cc_color_background_3_alpha_40: rgba(235,239,245,0.4);
79
+ --cc_color_background_3_alpha_30: rgba(235,239,245,0.3);
80
+ --cc_color_background_3_alpha_20: rgba(235,239,245,0.2);
81
+ --cc_color_background_3_alpha_10: rgba(235,239,245,0.1);
82
+
83
+ --cc_color_text_default: #142334;
84
+
85
+
86
+ --cc_color_text_subtle: #4d5a68;
87
+
88
+
89
+ --cc_color_text_nonessential: #8191a2;
90
+
91
+
92
+ --cc_color_button_background_primary: #0967d2;
93
+ --cc_color_button_background_primary_lighten_10: #2176d6;
94
+ --cc_color_button_background_primary_lighten_15: #2d7dd8;
95
+ --cc_color_button_background_primary_lighten_85: #dae8f8;
96
+ --cc_color_button_background_primary_lighten_90: #e6effa;
97
+ --cc_color_button_background_primary_lighten_95: #f2f7fc;
98
+ --cc_color_button_background_primary_darken_10: #085cbd;
99
+ --cc_color_button_background_primary_darken_15: #0757b2;
100
+
101
+ --cc_color_button_background_primary_alpha_90: rgba(9,103,210,0.9);
102
+ --cc_color_button_background_primary_alpha_80: rgba(9,103,210,0.8);
103
+ --cc_color_button_background_primary_alpha_70: rgba(9,103,210,0.7);
104
+ --cc_color_button_background_primary_alpha_60: rgba(9,103,210,0.6);
105
+ --cc_color_button_background_primary_alpha_50: rgba(9,103,210,0.5);
106
+ --cc_color_button_background_primary_alpha_40: rgba(9,103,210,0.4);
107
+ --cc_color_button_background_primary_alpha_30: rgba(9,103,210,0.3);
108
+ --cc_color_button_background_primary_alpha_20: rgba(9,103,210,0.2);
109
+ --cc_color_button_background_primary_alpha_10: rgba(9,103,210,0.1);
110
+
111
+ --cc_color_button_background_secondary: #1f3751;
112
+ --cc_color_button_background_secondary_lighten_10: #354b62;
113
+ --cc_color_button_background_secondary_lighten_15: #40556b;
114
+ --cc_color_button_background_secondary_lighten_85: #dde1e4;
115
+ --cc_color_button_background_secondary_lighten_90: #e8ebed;
116
+ --cc_color_button_background_secondary_lighten_95: #f3f5f6;
117
+ --cc_color_button_background_secondary_darken_10: #1b3148;
118
+ --cc_color_button_background_secondary_darken_15: #1a2e44;
119
+
120
+ --cc_color_button_background_secondary_alpha_90: rgba(31,55,81,0.9);
121
+ --cc_color_button_background_secondary_alpha_80: rgba(31,55,81,0.8);
122
+ --cc_color_button_background_secondary_alpha_70: rgba(31,55,81,0.7);
123
+ --cc_color_button_background_secondary_alpha_60: rgba(31,55,81,0.6);
124
+ --cc_color_button_background_secondary_alpha_50: rgba(31,55,81,0.5);
125
+ --cc_color_button_background_secondary_alpha_40: rgba(31,55,81,0.4);
126
+ --cc_color_button_background_secondary_alpha_30: rgba(31,55,81,0.3);
127
+ --cc_color_button_background_secondary_alpha_20: rgba(31,55,81,0.2);
128
+ --cc_color_button_background_secondary_alpha_10: rgba(31,55,81,0.1);
129
+
130
+ --cc_color_button_background_subtle: #ebeff5;
131
+ --cc_color_button_background_subtle_lighten_10: #edf0f6;
132
+ --cc_color_button_background_subtle_lighten_15: #eef1f6;
133
+ --cc_color_button_background_subtle_lighten_85: #fcfcfd;
134
+ --cc_color_button_background_subtle_lighten_90: #fdfdfe;
135
+ --cc_color_button_background_subtle_lighten_95: #fefefe;
136
+ --cc_color_button_background_subtle_darken_10: #d3d7dc;
137
+ --cc_color_button_background_subtle_darken_15: #c7cbd0;
138
+
139
+ --cc_color_button_background_subtle_alpha_90: rgba(235,239,245,0.9);
140
+ --cc_color_button_background_subtle_alpha_80: rgba(235,239,245,0.8);
141
+ --cc_color_button_background_subtle_alpha_70: rgba(235,239,245,0.7);
142
+ --cc_color_button_background_subtle_alpha_60: rgba(235,239,245,0.6);
143
+ --cc_color_button_background_subtle_alpha_50: rgba(235,239,245,0.5);
144
+ --cc_color_button_background_subtle_alpha_40: rgba(235,239,245,0.4);
145
+ --cc_color_button_background_subtle_alpha_30: rgba(235,239,245,0.3);
146
+ --cc_color_button_background_subtle_alpha_20: rgba(235,239,245,0.2);
147
+ --cc_color_button_background_subtle_alpha_10: rgba(235,239,245,0.1);
148
+
149
+ --cc_color_button_background_tint: #e5f1ff;
150
+ --cc_color_button_background_tint_lighten_10: #e7f2ff;
151
+ --cc_color_button_background_tint_lighten_15: #e8f3ff;
152
+ --cc_color_button_background_tint_lighten_85: #fbfcff;
153
+ --cc_color_button_background_tint_lighten_90: #fcfdff;
154
+ --cc_color_button_background_tint_lighten_95: #fdfeff;
155
+ --cc_color_button_background_tint_darken_10: #ced8e5;
156
+ --cc_color_button_background_tint_darken_15: #c2ccd8;
157
+
158
+ --cc_color_button_background_tint_alpha_90: rgba(229,241,255,0.9);
159
+ --cc_color_button_background_tint_alpha_80: rgba(229,241,255,0.8);
160
+ --cc_color_button_background_tint_alpha_70: rgba(229,241,255,0.7);
161
+ --cc_color_button_background_tint_alpha_60: rgba(229,241,255,0.6);
162
+ --cc_color_button_background_tint_alpha_50: rgba(229,241,255,0.5);
163
+ --cc_color_button_background_tint_alpha_40: rgba(229,241,255,0.4);
164
+ --cc_color_button_background_tint_alpha_30: rgba(229,241,255,0.3);
165
+ --cc_color_button_background_tint_alpha_20: rgba(229,241,255,0.2);
166
+ --cc_color_button_background_tint_alpha_10: rgba(229,241,255,0.1);
167
+
168
+ --cc_color_button_text_primary: #ffffff;
169
+
170
+
171
+ --cc_color_button_text_secondary: #ffffff;
172
+
173
+
174
+ --cc_color_button_text_subtle: #4d5a68;
175
+
176
+
177
+ --cc_color_button_text_destroy: #ffffff;
178
+
179
+
180
+ --cc_color_button_text_success: #ffffff;
181
+
182
+
183
+ --cc_color_link_primary: #0967d2;
184
+ --cc_color_link_primary_lighten_10: #2176d6;
185
+ --cc_color_link_primary_lighten_15: #2d7dd8;
186
+ --cc_color_link_primary_lighten_85: #dae8f8;
187
+ --cc_color_link_primary_lighten_90: #e6effa;
188
+ --cc_color_link_primary_lighten_95: #f2f7fc;
189
+ --cc_color_link_primary_darken_10: #085cbd;
190
+ --cc_color_link_primary_darken_15: #0757b2;
191
+
192
+ --cc_color_link_primary_alpha_90: rgba(9,103,210,0.9);
193
+ --cc_color_link_primary_alpha_80: rgba(9,103,210,0.8);
194
+ --cc_color_link_primary_alpha_70: rgba(9,103,210,0.7);
195
+ --cc_color_link_primary_alpha_60: rgba(9,103,210,0.6);
196
+ --cc_color_link_primary_alpha_50: rgba(9,103,210,0.5);
197
+ --cc_color_link_primary_alpha_40: rgba(9,103,210,0.4);
198
+ --cc_color_link_primary_alpha_30: rgba(9,103,210,0.3);
199
+ --cc_color_link_primary_alpha_20: rgba(9,103,210,0.2);
200
+ --cc_color_link_primary_alpha_10: rgba(9,103,210,0.1);
201
+
202
+ --cc_color_link_secondary: #142334;
203
+ --cc_color_link_secondary_lighten_10: #2b3848;
204
+ --cc_color_link_secondary_lighten_15: #374452;
205
+ --cc_color_link_secondary_lighten_85: #dbdee0;
206
+ --cc_color_link_secondary_lighten_90: #e7e9ea;
207
+ --cc_color_link_secondary_lighten_95: #f3f4f4;
208
+ --cc_color_link_secondary_darken_10: #121f2e;
209
+ --cc_color_link_secondary_darken_15: #111d2c;
210
+
211
+ --cc_color_link_secondary_alpha_90: rgba(20,35,52,0.9);
212
+ --cc_color_link_secondary_alpha_80: rgba(20,35,52,0.8);
213
+ --cc_color_link_secondary_alpha_70: rgba(20,35,52,0.7);
214
+ --cc_color_link_secondary_alpha_60: rgba(20,35,52,0.6);
215
+ --cc_color_link_secondary_alpha_50: rgba(20,35,52,0.5);
216
+ --cc_color_link_secondary_alpha_40: rgba(20,35,52,0.4);
217
+ --cc_color_link_secondary_alpha_30: rgba(20,35,52,0.3);
218
+ --cc_color_link_secondary_alpha_20: rgba(20,35,52,0.2);
219
+ --cc_color_link_secondary_alpha_10: rgba(20,35,52,0.1);
220
+
221
+ --cc_color_link_subtle: #4d5a68;
222
+ --cc_color_link_subtle_lighten_10: #5e6a77;
223
+ --cc_color_link_subtle_lighten_15: #67727e;
224
+ --cc_color_link_subtle_lighten_85: #e4e6e8;
225
+ --cc_color_link_subtle_lighten_90: #edeeef;
226
+ --cc_color_link_subtle_lighten_95: #f6f6f7;
227
+ --cc_color_link_subtle_darken_10: #45515d;
228
+ --cc_color_link_subtle_darken_15: #414c58;
229
+
230
+ --cc_color_link_subtle_alpha_90: rgba(77,90,104,0.9);
231
+ --cc_color_link_subtle_alpha_80: rgba(77,90,104,0.8);
232
+ --cc_color_link_subtle_alpha_70: rgba(77,90,104,0.7);
233
+ --cc_color_link_subtle_alpha_60: rgba(77,90,104,0.6);
234
+ --cc_color_link_subtle_alpha_50: rgba(77,90,104,0.5);
235
+ --cc_color_link_subtle_alpha_40: rgba(77,90,104,0.4);
236
+ --cc_color_link_subtle_alpha_30: rgba(77,90,104,0.3);
237
+ --cc_color_link_subtle_alpha_20: rgba(77,90,104,0.2);
238
+ --cc_color_link_subtle_alpha_10: rgba(77,90,104,0.1);
239
+
240
+ --cc_color_border_default: rgba(20, 35, 52, 0.12);
241
+
242
+
243
+ --cc_color_border_input_inactive: rgba(20, 35, 52, 0.2);
244
+
245
+
246
+ --cc_color_border_input_active: #0967d2;
247
+
248
+
249
+ --cc_color_depth_1: rgba(20, 35, 52, 0.13);
250
+
251
+
252
+ --cc_color_depth_2: rgba(20, 35, 52, 0.13);
253
+
254
+
255
+ --cc_color_depth_3: rgba(20, 35, 52, 0.2);
256
+
257
+
258
+ }