├── .idea
    ├── code_sketch_resource.iml
    ├── misc.xml
    ├── modules.xml
    ├── vcs.xml
    └── workspace.xml
└── styleguide
    ├── .gitignore
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── src
        ├── components
        │   ├── Badge.js
        │   ├── Label.js
        │   ├── Palette_new.js
        │   ├── Swatch_new.js
        │   └── TypeSpecimen.js
        ├── designSystem.js
        ├── main.js
        ├── manifest.json
        ├── pages
        │   └── styleguide.js
        └── processColor.js
    └── styleguide.sketchplugin
        └── Contents
            └── Sketch
                ├── main.js
                └── manifest.json


/.idea/code_sketch_resource.iml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <module type="JAVA_MODULE" version="4">
3 |   <component name="NewModuleRootManager" inherit-compiler-output="true">
4 |     <exclude-output />
5 |     <content url="file://$MODULE_DIR$" />
6 |     <orderEntry type="inheritedJdk" />
7 |     <orderEntry type="sourceFolder" forTests="false" />
8 |   </component>
9 | </module>


--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="JavaScriptSettings">
4 |     <option name="languageLevel" value="JSX" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/code_sketch_resource.iml" filepath="$PROJECT_DIR$/.idea/code_sketch_resource.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <project version="4">
  3 |   <component name="ChangeListManager">
  4 |     <list default="true" id="d63b1c36-1a2f-49d7-95d6-28f7160c9d1a" name="Default" comment="" />
  5 |     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
  6 |     <option name="TRACKING_ENABLED" value="true" />
  7 |     <option name="SHOW_DIALOG" value="false" />
  8 |     <option name="HIGHLIGHT_CONFLICTS" value="true" />
  9 |     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
 10 |     <option name="LAST_RESOLUTION" value="IGNORE" />
 11 |   </component>
 12 |   <component name="FileEditorManager">
 13 |     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
 14 |       <file leaf-file-name="package.json" pinned="false" current-in-tab="false">
 15 |         <entry file="file://$PROJECT_DIR$/styleguide/package.json">
 16 |           <provider selected="true" editor-type-id="text-editor">
 17 |             <state relative-caret-position="240">
 18 |               <caret line="16" column="19" selection-start-line="16" selection-start-column="19" selection-end-line="16" selection-end-column="19" />
 19 |             </state>
 20 |           </provider>
 21 |         </entry>
 22 |       </file>
 23 |       <file leaf-file-name="styleguide.js" pinned="false" current-in-tab="false">
 24 |         <entry file="file://$PROJECT_DIR$/styleguide/src/pages/styleguide.js">
 25 |           <provider selected="true" editor-type-id="text-editor">
 26 |             <state relative-caret-position="705">
 27 |               <caret line="54" column="73" selection-start-line="54" selection-start-column="73" selection-end-line="54" selection-end-column="73" />
 28 |               <folding>
 29 |                 <element signature="e#95#126#0" expanded="true" />
 30 |               </folding>
 31 |             </state>
 32 |           </provider>
 33 |         </entry>
 34 |       </file>
 35 |       <file leaf-file-name="manifest.json" pinned="false" current-in-tab="false">
 36 |         <entry file="file://$PROJECT_DIR$/styleguide/src/manifest.json">
 37 |           <provider selected="true" editor-type-id="text-editor">
 38 |             <state relative-caret-position="105">
 39 |               <caret line="7" column="27" selection-start-line="7" selection-start-column="27" selection-end-line="7" selection-end-column="27" />
 40 |             </state>
 41 |           </provider>
 42 |         </entry>
 43 |       </file>
 44 |       <file leaf-file-name="designSystem.js" pinned="false" current-in-tab="false">
 45 |         <entry file="file://$PROJECT_DIR$/styleguide/src/designSystem.js">
 46 |           <provider selected="true" editor-type-id="text-editor">
 47 |             <state relative-caret-position="225">
 48 |               <caret line="17" column="57" selection-start-line="17" selection-start-column="57" selection-end-line="17" selection-end-column="57" />
 49 |               <folding>
 50 |                 <element signature="e#0#42#0" expanded="true" />
 51 |               </folding>
 52 |             </state>
 53 |           </provider>
 54 |         </entry>
 55 |       </file>
 56 |       <file leaf-file-name="main.js" pinned="false" current-in-tab="false">
 57 |         <entry file="file://$PROJECT_DIR$/styleguide/src/main.js">
 58 |           <provider selected="true" editor-type-id="text-editor">
 59 |             <state relative-caret-position="45">
 60 |               <caret line="5" column="44" selection-start-line="5" selection-start-column="44" selection-end-line="5" selection-end-column="44" />
 61 |               <folding>
 62 |                 <element signature="e#95#126#0" expanded="true" />
 63 |               </folding>
 64 |             </state>
 65 |           </provider>
 66 |         </entry>
 67 |       </file>
 68 |       <file leaf-file-name="Swatch_new.js" pinned="false" current-in-tab="false">
 69 |         <entry file="file://$PROJECT_DIR$/styleguide/src/components/Swatch_new.js">
 70 |           <provider selected="true" editor-type-id="text-editor">
 71 |             <state relative-caret-position="135">
 72 |               <caret line="11" column="2" selection-start-line="11" selection-start-column="2" selection-end-line="11" selection-end-column="2" />
 73 |             </state>
 74 |           </provider>
 75 |         </entry>
 76 |       </file>
 77 |       <file leaf-file-name="README.md" pinned="false" current-in-tab="true">
 78 |         <entry file="file://$PROJECT_DIR$/styleguide/README.md">
 79 |           <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
 80 |             <state split_layout="SPLIT">
 81 |               <first_editor relative-caret-position="217">
 82 |                 <caret line="30" column="71" lean-forward="true" selection-start-line="30" selection-start-column="71" selection-end-line="30" selection-end-column="71" />
 83 |               </first_editor>
 84 |               <second_editor />
 85 |             </state>
 86 |           </provider>
 87 |         </entry>
 88 |       </file>
 89 |       <file leaf-file-name="Palette_new.js" pinned="false" current-in-tab="false">
 90 |         <entry file="file://$PROJECT_DIR$/styleguide/src/components/Palette_new.js">
 91 |           <provider selected="true" editor-type-id="text-editor">
 92 |             <state relative-caret-position="180">
 93 |               <caret line="14" column="12" selection-end-line="29" />
 94 |               <folding>
 95 |                 <element signature="e#9#40#0" expanded="true" />
 96 |               </folding>
 97 |             </state>
 98 |           </provider>
 99 |         </entry>
100 |       </file>
101 |     </leaf>
102 |   </component>
103 |   <component name="FindInProjectRecents">
104 |     <findStrings>
105 |       <find>TypeSpecimen</find>
106 |     </findStrings>
107 |   </component>
108 |   <component name="Git.Settings">
109 |     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
110 |   </component>
111 |   <component name="IdeDocumentHistory">
112 |     <option name="CHANGED_PATHS">
113 |       <list>
114 |         <option value="$PROJECT_DIR$/styleguide/src/components/Palette_new.js" />
115 |         <option value="$PROJECT_DIR$/styleguide/src/designSystem.js" />
116 |         <option value="$PROJECT_DIR$/styleguide/src/pages/styleguide.js" />
117 |         <option value="$PROJECT_DIR$/styleguide/package.json" />
118 |         <option value="$PROJECT_DIR$/styleguide/README.md" />
119 |       </list>
120 |     </option>
121 |   </component>
122 |   <component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
123 |   <component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
124 |   <component name="JsGulpfileManager">
125 |     <detection-done>true</detection-done>
126 |     <sorting>DEFINITION_ORDER</sorting>
127 |   </component>
128 |   <component name="NodePackageJsonFileManager">
129 |     <packageJsonPaths>
130 |       <path value="$PROJECT_DIR$/styleguide/package.json" />
131 |     </packageJsonPaths>
132 |   </component>
133 |   <component name="ProjectFrameBounds">
134 |     <option name="y" value="23" />
135 |     <option name="width" value="1440" />
136 |     <option name="height" value="831" />
137 |   </component>
138 |   <component name="ProjectView">
139 |     <navigator proportions="" version="1">
140 |       <foldersAlwaysOnTop value="true" />
141 |     </navigator>
142 |     <panes>
143 |       <pane id="PackagesPane" />
144 |       <pane id="AndroidView" />
145 |       <pane id="ProjectPane">
146 |         <subPane>
147 |           <expand>
148 |             <path>
149 |               <item name="code-sketch-resource" type="b2602c69:ProjectViewProjectNode" />
150 |               <item name="code-sketch-resource" type="462c0819:PsiDirectoryNode" />
151 |             </path>
152 |             <path>
153 |               <item name="code-sketch-resource" type="b2602c69:ProjectViewProjectNode" />
154 |               <item name="code-sketch-resource" type="462c0819:PsiDirectoryNode" />
155 |               <item name="styleguide" type="462c0819:PsiDirectoryNode" />
156 |             </path>
157 |           </expand>
158 |           <select />
159 |         </subPane>
160 |       </pane>
161 |       <pane id="Scope" />
162 |     </panes>
163 |   </component>
164 |   <component name="PropertiesComponent">
165 |     <property name="WebServerToolWindowFactoryState" value="false" />
166 |     <property name="aspect.path.notification.shown" value="true" />
167 |     <property name="last_opened_file_path" value="$PROJECT_DIR$" />
168 |     <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
169 |     <property name="nodejs_npm_path_reset_for_default_project" value="true" />
170 |   </component>
171 |   <component name="RunDashboard">
172 |     <option name="ruleStates">
173 |       <list>
174 |         <RuleState>
175 |           <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
176 |         </RuleState>
177 |         <RuleState>
178 |           <option name="name" value="StatusDashboardGroupingRule" />
179 |         </RuleState>
180 |       </list>
181 |     </option>
182 |   </component>
183 |   <component name="RunManager">
184 |     <configuration default="true" type="Application" factoryName="Application">
185 |       <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
186 |     </configuration>
187 |     <configuration default="true" type="JUnit" factoryName="JUnit">
188 |       <option name="ALTERNATIVE_JRE_PATH_ENABLED" value="false" />
189 |       <option name="ALTERNATIVE_JRE_PATH" />
190 |       <option name="PACKAGE_NAME" />
191 |       <option name="MAIN_CLASS_NAME" />
192 |       <option name="METHOD_NAME" />
193 |       <option name="TEST_OBJECT" value="class" />
194 |       <option name="VM_PARAMETERS" value="-ea" />
195 |       <option name="PARAMETERS" />
196 |       <option name="WORKING_DIRECTORY" value="%MODULE_WORKING_DIR%" />
197 |       <option name="PASS_PARENT_ENVS" value="true" />
198 |       <option name="TEST_SEARCH_SCOPE">
199 |         <value defaultName="singleModule" />
200 |       </option>
201 |       <patterns />
202 |     </configuration>
203 |     <configuration default="true" type="TestNG" factoryName="TestNG">
204 |       <option name="ALTERNATIVE_JRE_PATH_ENABLED" value="false" />
205 |       <option name="ALTERNATIVE_JRE_PATH" />
206 |       <option name="SUITE_NAME" />
207 |       <option name="PACKAGE_NAME" />
208 |       <option name="MAIN_CLASS_NAME" />
209 |       <option name="METHOD_NAME" />
210 |       <option name="GROUP_NAME" />
211 |       <option name="TEST_OBJECT" value="CLASS" />
212 |       <option name="VM_PARAMETERS" value="-ea" />
213 |       <option name="PARAMETERS" />
214 |       <option name="WORKING_DIRECTORY" value="%MODULE_WORKING_DIR%" />
215 |       <option name="OUTPUT_DIRECTORY" />
216 |       <option name="PASS_PARENT_ENVS" value="true" />
217 |       <option name="TEST_SEARCH_SCOPE">
218 |         <value defaultName="singleModule" />
219 |       </option>
220 |       <option name="USE_DEFAULT_REPORTERS" value="false" />
221 |       <option name="PROPERTIES_FILE" />
222 |       <properties />
223 |       <listeners />
224 |     </configuration>
225 |   </component>
226 |   <component name="SvnConfiguration">
227 |     <configuration />
228 |   </component>
229 |   <component name="TaskManager">
230 |     <task active="true" id="Default" summary="Default task">
231 |       <changelist id="d63b1c36-1a2f-49d7-95d6-28f7160c9d1a" name="Default" comment="" />
232 |       <created>1552037051859</created>
233 |       <option name="number" value="Default" />
234 |       <option name="presentableId" value="Default" />
235 |       <updated>1552037051859</updated>
236 |       <workItem from="1552037053083" duration="10783000" />
237 |       <workItem from="1552122783790" duration="1218000" />
238 |       <workItem from="1552406550034" duration="269000" />
239 |     </task>
240 |     <servers />
241 |   </component>
242 |   <component name="TimeTrackingManager">
243 |     <option name="totallyTimeSpent" value="12270000" />
244 |   </component>
245 |   <component name="ToolWindowManager">
246 |     <frame x="0" y="23" width="1440" height="831" extended-state="0" />
247 |     <editor active="true" />
248 |     <layout>
249 |       <window_info anchor="right" id="Palette" order="3" />
250 |       <window_info anchor="bottom" id="TODO" order="6" />
251 |       <window_info anchor="right" id="Palette&#9;" order="3" />
252 |       <window_info id="Image Layers" order="2" />
253 |       <window_info anchor="right" id="Capture Analysis" order="3" />
254 |       <window_info anchor="bottom" id="Event Log" order="7" side_tool="true" />
255 |       <window_info anchor="right" id="Maven Projects" order="3" />
256 |       <window_info anchor="bottom" id="Database Changes" order="7" show_stripe_button="false" />
257 |       <window_info anchor="bottom" id="Version Control" order="7" />
258 |       <window_info anchor="bottom" id="Run" order="2" />
259 |       <window_info anchor="bottom" id="Terminal" order="7" visible="true" weight="0.32833788" />
260 |       <window_info id="Capture Tool" order="2" />
261 |       <window_info id="Designer" order="2" />
262 |       <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.2739628" />
263 |       <window_info anchor="right" id="Database" order="3" />
264 |       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
265 |       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
266 |       <window_info id="UI Designer" order="2" />
267 |       <window_info anchor="right" id="Theme Preview" order="3" />
268 |       <window_info id="Favorites" order="2" side_tool="true" />
269 |       <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
270 |       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
271 |       <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
272 |       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
273 |       <window_info anchor="bottom" id="Message" order="0" />
274 |       <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
275 |       <window_info anchor="bottom" id="Find" order="1" weight="0.32970026" />
276 |     </layout>
277 |   </component>
278 |   <component name="TypeScriptGeneratedFilesManager">
279 |     <option name="version" value="1" />
280 |   </component>
281 |   <component name="VcsContentAnnotationSettings">
282 |     <option name="myLimit" value="2678400000" />
283 |   </component>
284 |   <component name="editorHistoryManager">
285 |     <entry file="file://$PROJECT_DIR$/styleguide/package.json">
286 |       <provider selected="true" editor-type-id="text-editor">
287 |         <state relative-caret-position="240">
288 |           <caret line="16" column="19" selection-start-line="16" selection-start-column="19" selection-end-line="16" selection-end-column="19" />
289 |         </state>
290 |       </provider>
291 |     </entry>
292 |     <entry file="file://$PROJECT_DIR$/styleguide/src/pages/styleguide.js">
293 |       <provider selected="true" editor-type-id="text-editor">
294 |         <state relative-caret-position="705">
295 |           <caret line="54" column="73" selection-start-line="54" selection-start-column="73" selection-end-line="54" selection-end-column="73" />
296 |           <folding>
297 |             <element signature="e#95#126#0" expanded="true" />
298 |           </folding>
299 |         </state>
300 |       </provider>
301 |     </entry>
302 |     <entry file="file://$PROJECT_DIR$/styleguide/src/manifest.json">
303 |       <provider selected="true" editor-type-id="text-editor">
304 |         <state relative-caret-position="105">
305 |           <caret line="7" column="27" selection-start-line="7" selection-start-column="27" selection-end-line="7" selection-end-column="27" />
306 |         </state>
307 |       </provider>
308 |     </entry>
309 |     <entry file="file://$PROJECT_DIR$/styleguide/src/designSystem.js">
310 |       <provider selected="true" editor-type-id="text-editor">
311 |         <state relative-caret-position="225">
312 |           <caret line="17" column="57" selection-start-line="17" selection-start-column="57" selection-end-line="17" selection-end-column="57" />
313 |           <folding>
314 |             <element signature="e#0#42#0" expanded="true" />
315 |           </folding>
316 |         </state>
317 |       </provider>
318 |     </entry>
319 |     <entry file="file://$PROJECT_DIR$/styleguide/src/main.js">
320 |       <provider selected="true" editor-type-id="text-editor">
321 |         <state relative-caret-position="45">
322 |           <caret line="5" column="44" selection-start-line="5" selection-start-column="44" selection-end-line="5" selection-end-column="44" />
323 |           <folding>
324 |             <element signature="e#95#126#0" expanded="true" />
325 |           </folding>
326 |         </state>
327 |       </provider>
328 |     </entry>
329 |     <entry file="file://$PROJECT_DIR$/styleguide/src/components/Swatch_new.js">
330 |       <provider selected="true" editor-type-id="text-editor">
331 |         <state relative-caret-position="135">
332 |           <caret line="11" column="2" selection-start-line="11" selection-start-column="2" selection-end-line="11" selection-end-column="2" />
333 |         </state>
334 |       </provider>
335 |     </entry>
336 |     <entry file="file://$PROJECT_DIR$/styleguide/src/components/Palette_new.js">
337 |       <provider selected="true" editor-type-id="text-editor">
338 |         <state relative-caret-position="180">
339 |           <caret line="14" column="12" selection-end-line="29" />
340 |           <folding>
341 |             <element signature="e#9#40#0" expanded="true" />
342 |           </folding>
343 |         </state>
344 |       </provider>
345 |     </entry>
346 |     <entry file="file://$PROJECT_DIR$/styleguide/README.md">
347 |       <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
348 |         <state split_layout="SPLIT">
349 |           <first_editor relative-caret-position="465">
350 |             <caret line="31" column="30" lean-forward="true" selection-start-line="31" selection-start-column="30" selection-end-line="31" selection-end-column="30" />
351 |           </first_editor>
352 |           <second_editor />
353 |         </state>
354 |       </provider>
355 |     </entry>
356 |     <entry file="file://$PROJECT_DIR$/styleguide/package.json">
357 |       <provider selected="true" editor-type-id="text-editor">
358 |         <state relative-caret-position="240">
359 |           <caret line="16" column="19" lean-forward="true" selection-start-line="16" selection-start-column="19" selection-end-line="16" selection-end-column="19" />
360 |         </state>
361 |       </provider>
362 |     </entry>
363 |     <entry file="file://$PROJECT_DIR$/styleguide/src/pages/styleguide.js">
364 |       <provider selected="true" editor-type-id="text-editor">
365 |         <state relative-caret-position="810">
366 |           <caret line="54" column="73" selection-start-line="54" selection-start-column="73" selection-end-line="54" selection-end-column="73" />
367 |           <folding>
368 |             <element signature="e#95#126#0" expanded="true" />
369 |           </folding>
370 |         </state>
371 |       </provider>
372 |     </entry>
373 |     <entry file="file://$PROJECT_DIR$/styleguide/src/manifest.json">
374 |       <provider selected="true" editor-type-id="text-editor">
375 |         <state relative-caret-position="105">
376 |           <caret line="7" column="27" lean-forward="true" selection-start-line="7" selection-start-column="27" selection-end-line="7" selection-end-column="27" />
377 |         </state>
378 |       </provider>
379 |     </entry>
380 |     <entry file="file://$PROJECT_DIR$/styleguide/src/designSystem.js">
381 |       <provider selected="true" editor-type-id="text-editor">
382 |         <state relative-caret-position="225">
383 |           <caret line="17" column="57" selection-start-line="17" selection-start-column="57" selection-end-line="17" selection-end-column="57" />
384 |           <folding>
385 |             <element signature="e#0#42#0" expanded="true" />
386 |           </folding>
387 |         </state>
388 |       </provider>
389 |     </entry>
390 |     <entry file="file://$PROJECT_DIR$/styleguide/src/main.js">
391 |       <provider selected="true" editor-type-id="text-editor">
392 |         <state relative-caret-position="45">
393 |           <caret line="5" column="44" selection-start-line="5" selection-start-column="44" selection-end-line="5" selection-end-column="44" />
394 |           <folding>
395 |             <element signature="e#95#126#0" expanded="true" />
396 |           </folding>
397 |         </state>
398 |       </provider>
399 |     </entry>
400 |     <entry file="file://$PROJECT_DIR$/styleguide/src/components/Palette_new.js">
401 |       <provider selected="true" editor-type-id="text-editor">
402 |         <state relative-caret-position="180">
403 |           <caret line="14" column="12" lean-forward="true" selection-end-line="29" />
404 |           <folding>
405 |             <element signature="e#9#40#0" expanded="true" />
406 |           </folding>
407 |         </state>
408 |       </provider>
409 |     </entry>
410 |     <entry file="file://$PROJECT_DIR$/styleguide/src/components/Swatch_new.js">
411 |       <provider selected="true" editor-type-id="text-editor">
412 |         <state relative-caret-position="60">
413 |           <caret line="6" column="22" lean-forward="true" selection-end-line="29" />
414 |         </state>
415 |       </provider>
416 |     </entry>
417 |     <entry file="file://$PROJECT_DIR$/styleguide/src/components/AccessibilityBadge.js" />
418 |     <entry file="file://$PROJECT_DIR$/styleguide/src/components/TypeSpecimen.js">
419 |       <provider selected="true" editor-type-id="text-editor">
420 |         <state relative-caret-position="240">
421 |           <caret line="18" column="5" lean-forward="true" selection-start-line="18" selection-start-column="5" selection-end-line="18" selection-end-column="5" />
422 |         </state>
423 |       </provider>
424 |     </entry>
425 |     <entry file="file://$PROJECT_DIR$/styleguide/src/components/Label.js">
426 |       <provider selected="true" editor-type-id="text-editor" />
427 |     </entry>
428 |     <entry file="file://$PROJECT_DIR$/styleguide/src/designSystem.js">
429 |       <provider selected="true" editor-type-id="text-editor">
430 |         <state relative-caret-position="225">
431 |           <caret line="17" column="57" selection-start-line="17" selection-start-column="57" selection-end-line="17" selection-end-column="57" />
432 |           <folding>
433 |             <element signature="e#0#42#0" expanded="true" />
434 |           </folding>
435 |         </state>
436 |       </provider>
437 |     </entry>
438 |     <entry file="file://$PROJECT_DIR$/styleguide/src/pages/styleguide.js">
439 |       <provider selected="true" editor-type-id="text-editor">
440 |         <state relative-caret-position="705">
441 |           <caret line="54" column="73" selection-start-line="54" selection-start-column="73" selection-end-line="54" selection-end-column="73" />
442 |           <folding>
443 |             <element signature="e#95#126#0" expanded="true" />
444 |           </folding>
445 |         </state>
446 |       </provider>
447 |     </entry>
448 |     <entry file="file://$PROJECT_DIR$/styleguide/src/main.js">
449 |       <provider selected="true" editor-type-id="text-editor">
450 |         <state relative-caret-position="45">
451 |           <caret line="5" column="44" selection-start-line="5" selection-start-column="44" selection-end-line="5" selection-end-column="44" />
452 |           <folding>
453 |             <element signature="e#95#126#0" expanded="true" />
454 |           </folding>
455 |         </state>
456 |       </provider>
457 |     </entry>
458 |     <entry file="file://$PROJECT_DIR$/styleguide/src/manifest.json">
459 |       <provider selected="true" editor-type-id="text-editor">
460 |         <state relative-caret-position="105">
461 |           <caret line="7" column="27" selection-start-line="7" selection-start-column="27" selection-end-line="7" selection-end-column="27" />
462 |         </state>
463 |       </provider>
464 |     </entry>
465 |     <entry file="file://$PROJECT_DIR$/styleguide/package.json">
466 |       <provider selected="true" editor-type-id="text-editor">
467 |         <state relative-caret-position="240">
468 |           <caret line="16" column="19" selection-start-line="16" selection-start-column="19" selection-end-line="16" selection-end-column="19" />
469 |         </state>
470 |       </provider>
471 |     </entry>
472 |     <entry file="file://$PROJECT_DIR$/styleguide/src/components/Palette_new.js">
473 |       <provider selected="true" editor-type-id="text-editor">
474 |         <state relative-caret-position="180">
475 |           <caret line="14" column="12" selection-end-line="29" />
476 |           <folding>
477 |             <element signature="e#9#40#0" expanded="true" />
478 |           </folding>
479 |         </state>
480 |       </provider>
481 |     </entry>
482 |     <entry file="file://$PROJECT_DIR$/styleguide/src/components/Swatch_new.js">
483 |       <provider selected="true" editor-type-id="text-editor">
484 |         <state relative-caret-position="135">
485 |           <caret line="11" column="2" selection-start-line="11" selection-start-column="2" selection-end-line="11" selection-end-column="2" />
486 |         </state>
487 |       </provider>
488 |     </entry>
489 |     <entry file="file://$PROJECT_DIR$/styleguide/README.md">
490 |       <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
491 |         <state split_layout="SPLIT">
492 |           <first_editor relative-caret-position="217">
493 |             <caret line="30" column="71" lean-forward="true" selection-start-line="30" selection-start-column="71" selection-end-line="30" selection-end-column="71" />
494 |           </first_editor>
495 |           <second_editor />
496 |         </state>
497 |       </provider>
498 |     </entry>
499 |   </component>
500 | </project>


--------------------------------------------------------------------------------
/styleguide/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | .DS_Store


--------------------------------------------------------------------------------
/styleguide/README.md:
--------------------------------------------------------------------------------
 1 | # Styleguide
 2 | For a detailed explanation on how things work, checkout the [code-sketch-resource Readme](https://www.yuque.com/jingwhale/tool/vgwxdb).
 3 | 
 4 | ## How to use
 5 | 
 6 | Download the project:
 7 | 
 8 | ```bash
 9 | https://github.com/jingwhale/code_sketch_resource/tar.gz/master
10 | cd styleguide
11 | ```
12 | 
13 | or [clone the repo](https://github.com/jingwhale/code_sketch_resource):
14 | ```bash
15 | git clone https://github.com/jingwhale/code_sketch_resource
16 | cd styleguide
17 | ```
18 | 
19 | Install the dependencies
20 | 
21 | ```bash
22 | npm install
23 | ```
24 | 
25 | Run with live reloading in Sketch, in terminal:
26 | 
27 | ```bash
28 | npm run render
29 | ```
30 | 
31 | or, open Sketch and navigate to `Plugins → react-sketchapp: Styleguide`
32 | 
33 | ## [The idea behind the project](https://www.yuque.com/jingwhale/component/artboards/59671)
34 | 
35 | The reason we started `react-sketchapp` was to build dynamic styleguides! This is an example showing how to quickly render rich styleguides from JavaScript design system definition. It uses `flow` to enforce correctness, and `chroma-js` to dynamically generate color contrast labels.
36 | 
37 | ![examples-styleguide-palette](https://cdn.nlark.com/yuque/0/2019/png/120638/1552048817637-6e5333e1-2958-4740-8029-f6f4714cabbb.png)
38 | 
39 | ![examples-styleguide-palette](https://cdn.nlark.com/yuque/0/2019/png/120638/1552049054577-d9c13c5f-fe5d-4a1f-af47-577ed3e7596d.png)
40 | 


--------------------------------------------------------------------------------
/styleguide/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "styleguide",
 3 |   "private": true,
 4 |   "skpm": {
 5 |     "main": "styleguide.sketchplugin",
 6 |     "manifest": "src/manifest.json"
 7 |   },
 8 |   "scripts": {
 9 |     "build": "skpm-build",
10 |     "watch": "skpm-build --watch",
11 |     "render": "skpm-build --watch --run",
12 |     "render:once": "skpm-build --run",
13 |     "postinstall": "npm run build && skpm-link"
14 |   },
15 |   "author": "Jingwhale <https://www.jingwhale.cc/>",
16 |   "license": "MIT",
17 |   "dependencies": {
18 |     "@ant-design/colors": "^2.0.4",
19 |     "antd": "^3.14.1",
20 |     "chroma-js": "^1.2.2",
21 |     "react": "^16.3.2",
22 |     "react-sketchapp": "^2.0.0",
23 |     "react-test-renderer": "^16.3.2"
24 |   },
25 |   "devDependencies": {
26 |     "@skpm/builder": "^0.4.0"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/styleguide/src/components/Badge.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import * as React from 'react';
 3 | import { View, Text } from 'react-sketchapp';
 4 | 
 5 | type P = {
 6 |   filled?: boolean,
 7 |   children?: React$Element<any>,
 8 | };
 9 | const Badge = ({ children, filled }: P) => (
10 |   <View
11 |     style={{
12 |       borderRadius: 4,
13 |       backgroundColor: filled ? '#333' : 'transparent',
14 |       paddingLeft: 8,
15 |       paddingRight: 8,
16 |       borderWidth: 1,
17 |       borderColor: '#333',
18 |     }}
19 |   >
20 |     <Text
21 |       style={{
22 |         color: filled ? '#fff' : '#333',
23 |       }}
24 |     >
25 |       {children}
26 |     </Text>
27 |   </View>
28 | );
29 | 
30 | export default Badge;
31 | 


--------------------------------------------------------------------------------
/styleguide/src/components/Label.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import * as React from 'react';
 3 | import { Text } from 'react-sketchapp';
 4 | 
 5 | type P = {
 6 |   bold?: boolean,
 7 |   children?: any,
 8 | };
 9 | const Label = ({ bold, children }: P) => (
10 |   <Text
11 |     style={{
12 |       color: '#333',
13 |       fontWeight: bold ? 'bold' : 'normal',
14 |       fontSize: 16,
15 |       lineHeight: 24,
16 |     }}
17 |   >
18 |     {children}
19 |   </Text>
20 | );
21 | 
22 | export default Label;
23 | 


--------------------------------------------------------------------------------
/styleguide/src/components/Palette_new.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import * as React from 'react';
 3 | import { View,Text} from 'react-sketchapp';
 4 | import SwatchN from './Swatch_new';
 5 | 
 6 | const SWATCH_WIDTH = 285;
 7 | 
 8 | type P = {
 9 |   colors: any,
10 | };
11 | const PaletteN = ({ name,colors}: P) => (
12 | 
13 |   <View
14 |      name={name}
15 |     style={{
16 |       width: SWATCH_WIDTH,
17 |       flexWrap: 'wrap',
18 |       marginRight: 33,
19 |       marginBottom: 64
20 |     }}
21 |   >
22 |       <Text style={{width:SWATCH_WIDTH,textAlign:"center",marginBottom:16}}>{name}</Text>
23 |       {Object.keys(colors).map(index => (
24 |       <SwatchN color={colors[index]} index={+index+1} name={name}/>
25 |     ))}
26 |   </View>
27 | );
28 | 
29 | export default PaletteN;
30 | 


--------------------------------------------------------------------------------
/styleguide/src/components/Swatch_new.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import * as React from 'react';
 3 | import { View,Text} from 'react-sketchapp';
 4 | import type { Color } from '../processColor';
 5 | 
 6 | const SWATCH_WIDTH = 285;
 7 | const SWATCH_HEIGHT = 56;
 8 | 
 9 | type P = {
10 |   name: string,
11 |   color: Color,
12 | };
13 | const SwatchN = ({ color ,index,name}: P) => (
14 |     <View
15 |       name={name+"-"+index}
16 |       style={{
17 |         width: SWATCH_WIDTH,
18 |         height: SWATCH_HEIGHT,
19 |         backgroundColor: color,
20 |         flexDirection: 'row',
21 |       }}
22 | 
23 |     >
24 |       <Text style={{width: 128,height: "20",color:index<6?"#000":"#fff",marginLeft:"12",marginTop:"18"}}>{name+"-"+index}</Text>
25 |       <Text style={{width: 128,height: "20",color:index<6?"#000":"#fff",textAlign:"right",marginTop:"18"}}>{color}</Text>
26 |   </View>
27 | );
28 | 
29 | export default SwatchN;
30 | 


--------------------------------------------------------------------------------
/styleguide/src/components/TypeSpecimen.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import * as React from 'react';
 3 | import { View, Text } from 'react-sketchapp';
 4 | import Label from './Label';
 5 | 
 6 | type P = {
 7 |   name: string,
 8 |   style: any,
 9 | };
10 | const TypeSpecimen = ({ name, style }: P) => (
11 |   <View name={`TypeSpecimen-${name}`} style={{ flexDirection: 'row', marginBottom: 24 }}>
12 |     <View style={{ width: 100 }}>
13 |       <Label>{`${style.fontSize} / ${style.lineHeight}`}</Label>
14 |     </View>
15 |     <Text
16 |       style={{
17 |         ...style,
18 |       }}
19 |     >
20 |       {name}
21 |     </Text>
22 |   </View>
23 | );
24 | 
25 | export default TypeSpecimen;
26 | 


--------------------------------------------------------------------------------
/styleguide/src/designSystem.js:
--------------------------------------------------------------------------------
 1 | import processColor from './processColor';
 2 | import type { Color } from './processColor';
 3 | import { generate, presetPalettes } from '@ant-design/colors';
 4 | 
 5 | 
 6 | export const colors = generate('#1890ff');
 7 | 
 8 | export const presetPalettesGrey = {};
 9 | 
10 | 
11 | presetPalettesGrey.grey = presetPalettes.grey;
12 | 
13 | delete presetPalettes["grey"];
14 | 
15 | //字体与行高
16 | export const presetFont = {
17 |     size: ["Font Size",12,14,16,20,24,30,38,46,56,68],
18 |     height: ["Line Height",20,22,24,28,32,38,46,54,64,76]
19 | };
20 | 
21 | 
22 | const typeSizes = [80, 48, 36, 24, 20, 16];
23 | 
24 | export const spacing = 16;
25 | 
26 | const fontFamilies = {
27 |     display: 'Helvetica',
28 |     body: 'Georgia',
29 | };
30 | 
31 | const fontWeights = {
32 |     regular: 'regular',
33 |     bold: 'bold',
34 | };
35 | 
36 | export const fonts = {
37 |     Headline: {
38 |         color: colors.Night,
39 |         fontSize: typeSizes[0],
40 |         fontFamily: fontFamilies.display,
41 |         fontWeight: fontWeights.bold,
42 |         lineHeight: 80,
43 |     },
44 |     'Title 1': {
45 |         color: colors.Night,
46 |         fontSize: typeSizes[2],
47 |         fontFamily: fontFamilies.display,
48 |         fontWeight: fontWeights.bold,
49 |         lineHeight: 48,
50 |     },
51 |     'Title 2': {
52 |         color: colors.Night,
53 |         fontSize: typeSizes[3],
54 |         fontFamily: fontFamilies.display,
55 |         fontWeight: fontWeights.bold,
56 |         lineHeight: 36,
57 |     },
58 |     'Title 3': {
59 |         color: colors.Night,
60 |         fontSize: typeSizes[4],
61 |         fontFamily: fontFamilies.body,
62 |         fontWeight: fontWeights.regular,
63 |         lineHeight: 24,
64 |     },
65 |     Body: {
66 |         color: colors.Night,
67 |         fontSize: typeSizes[5],
68 |         fontFamily: fontFamilies.body,
69 |         fontWeight: fontWeights.regular,
70 |         lineHeight: 24,
71 |         marginBottom: 24,
72 |     },
73 | };
74 | 
75 | export default {
76 |     colors,
77 |     fonts,
78 |     spacing,
79 |     presetPalettes,
80 |     presetPalettesGrey,
81 |     presetFont
82 | };
83 | 
84 | export type DesignSystem = {
85 |     fonts: any,
86 |     colors: { [key: string]: Color },
87 | };
88 | 


--------------------------------------------------------------------------------
/styleguide/src/main.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | /* eslint-disable react/jsx-filename-extension, import/no-named-as-default-member */
 3 | 
 4 | import * as React from 'react';
 5 | import { render } from 'react-sketchapp';
 6 | import Styleguide from './pages/styleguide';
 7 | 
 8 | 
 9 | export default (context: any) => {
10 | 
11 |     render(<Styleguide />, context.document.currentPage());
12 | 
13 | }
14 | 


--------------------------------------------------------------------------------
/styleguide/src/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compatibleVersion": 1,
 3 |   "bundleVersion": 1,
 4 |   "commands": [
 5 |     {
 6 |       "name": "react-sketchapp: Styleguide",
 7 |       "identifier": "main",
 8 |       "script": "./main.js"
 9 |     }
10 |   ],
11 |   "menu": {
12 |     "isRoot": true,
13 |     "items": [
14 |       "main"
15 |     ]
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/styleguide/src/pages/styleguide.js:
--------------------------------------------------------------------------------
  1 | // @flow
  2 | /* eslint-disable react/jsx-filename-extension, import/no-named-as-default-member */
  3 | 
  4 | import * as React from 'react';
  5 | 
  6 | import { render, TextStyles, View ,Page,Artboard,Text,Image} from 'react-sketchapp';
  7 | import designSystem, {generatec, presetFont, presetPalettes} from '../designSystem';
  8 | import type { DesignSystem } from '../designSystem';
  9 | 
 10 | import PaletteN from '../components/Palette_new';
 11 | import TypeSpecimen from '../components/TypeSpecimen';
 12 | 
 13 | 
 14 | const ARTBORD_WIDTH = 1440;
 15 | 
 16 | const Styleguide = () => {
 17 |     return (
 18 |         <Page name="style" style={{width: 1000000000,flexDirection: 'row',flexWrap: 'wrap',marginLeft:100}}>
 19 |             <Artboard name="Color" style={{width: ARTBORD_WIDTH}}>
 20 |                 <View name="header" style={{width: ARTBORD_WIDTH,height:400,backgroundColor:"#1890FF"}}>
 21 |                     <Text style={{fontSize:96,color:"#fff",marginTop:100,marginBottom:20,marginLeft:100}}>色彩体系-调色板</Text>
 22 |                     <Text style={{width: 1200,fontSize:30,color:"#fff",marginLeft:100}}>
 23 |                         Ant Design 系统级色彩体系同样源于『自然』的设计价值观，形成了特有的 12 色，并对 12 个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性。
 24 |                     </Text>
 25 |                 </View>
 26 | 
 27 |                 <View name="body">
 28 |                     <View name="基础色板">
 29 |                         <View style={{width: 1200,marginLeft:100,marginBottom:80}}>
 30 |                             <Text style={{fontSize:32,marginTop:100,marginBottom:16}}>基础色板</Text>
 31 |                             <Text style={{width: 1200,fontSize:24}}>基础色板共计 120 个颜色，包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。</Text>
 32 |                         </View>
 33 |                         <View style={{width: ARTBORD_WIDTH,flexDirection: 'row',flexWrap: 'wrap',marginLeft:100}}>
 34 |                             {Object.keys(designSystem.presetPalettes).map(name => (
 35 |                                 <PaletteN key={name} name={name.substring(0, 1).toUpperCase() + name.substring(1)} colors={designSystem.presetPalettes[name]} />
 36 |                             ))}
 37 |                         </View>
 38 |                     </View>
 39 |                     <View name="中性色板" style={{height: 1080}}>
 40 |                         <View style={{width: 1200,marginLeft:100,marginBottom:100}}>
 41 |                             <Text style={{fontSize:32,marginTop:100,marginBottom:16}}>中性色板</Text>
 42 |                             <Text style={{width: 1200,fontSize:24}}>
 43 |                                 中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理的选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 10 个颜色。</Text>
 44 |                         </View>
 45 |                         <View style={{width: ARTBORD_WIDTH,flexDirection: 'row',flexWrap: 'wrap',marginLeft:100}}>
 46 |                             {Object.keys(designSystem.presetPalettesGrey).map(name => (
 47 |                                 <PaletteN key={name} name={name.substring(0, 1).toUpperCase() + name.substring(1)} colors={designSystem.presetPalettesGrey[name]} />
 48 |                             ))}
 49 |                         </View>
 50 |                     </View>
 51 |                 </View>
 52 |             </Artboard>
 53 | 
 54 |             <Artboard name="Text" style={{width: ARTBORD_WIDTH,marginLeft:260}}>
 55 |                 <View name="header" style={{width: ARTBORD_WIDTH,height:400,backgroundColor:"#1890FF"}}>
 56 |                     <Text style={{fontSize:96,color:"#fff",marginTop:100,marginBottom:20,marginLeft:100}}>色彩体系-文字</Text>
 57 |                     <Text style={{width: 1200,fontSize:30,color:"#fff",marginLeft:100}}>
 58 |                         用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率,Ant Design 字体方案，基于『动态秩序』设计原则，结合自然对数以及音律的规则。
 59 |                     </Text>
 60 |                 </View>
 61 |                 <View name="body">
 62 |                     <View name="字体家族" style={{marginBottom:100}}>
 63 |                         <View style={{width: 1200,marginLeft:100,marginBottom:40}}>
 64 |                             <Text style={{fontSize:32,marginTop:100,marginBottom:16}}>字体家族</Text>
 65 |                             <Text style={{width: 1200,fontSize:24}}>
 66 |                                 优秀的字体系统首先是要选择合适的字体家族。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示。
 67 |                             </Text>
 68 |                         </View>
 69 |                         <View style={{width: 1200,flexWrap: 'wrap',marginLeft:100,backgroundColor:"#F2F4F5",fontSize:22,padding:10}}>
 70 |                             <Text style={{}}>font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif,
 71 |                                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
 72 |                             </Text>
 73 |                         </View>
 74 |                     </View>
 75 | 
 76 |                     <View name="主字体">
 77 |                         <View style={{width: 1200,marginLeft:100,marginBottom:100}}>
 78 |                             <Text style={{fontSize:32,marginTop:100,marginBottom:16}}>主字体</Text>
 79 |                             <Text style={{width: 1200,fontSize:24}}>
 80 |                                 我们基于电脑显示器阅读距离（50 cm）以及最佳阅读角度（0.3）对 主字体进行了，从原先的 12 上升至 14的调整，以保证在多数常用显示器上的用户阅读效率最佳。
 81 |                             </Text>
 82 |                             <Image source="https://gw.alipayobjects.com/zos/rmsportal/yriUFbqOPtVniYYiikfb.png"
 83 |                                 resizeMode="center"
 84 |                                 style={{
 85 |                                     height: 211,
 86 |                                     width: 680
 87 |                                 }}></Image>
 88 |                         </View>
 89 |                     </View>
 90 | 
 91 |                     <View name="字阶与行高">
 92 |                         <View style={{width: 1200,marginLeft:100,marginBottom:100}}>
 93 |                             <Text style={{fontSize:32,marginTop:100,marginBottom:16}}>字阶与行高</Text>
 94 |                             <Text style={{width: 1200,fontSize:24}}>
 95 |                                 字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。
 96 |                             </Text>
 97 |                             <Image source="https://gw.alipayobjects.com/zos/rmsportal/xpykKKFJQorFJltdXkie.png"
 98 |                                    resizeMode="center"
 99 |                                    style={{
100 |                                        height: 163,
101 |                                        width: 800,
102 |                                    }}></Image>
103 |                             <Text style={{width: 1200,fontSize:24,marginTop:20,marginBottom:16}}>
104 |                                 Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸的字体以及与之相对应的行高。
105 |                             </Text>
106 |                             <View style={{width: ARTBORD_WIDTH,flexDirection: 'row',flexWrap: 'wrap'}}>
107 |                                 {Object.keys(designSystem.presetFont.size).map(index => (
108 |                                     <Text style={{width: index>0?80:200,textAlign:"center",fontSize:28}}>{designSystem.presetFont.size[index]}</Text>
109 |                                 ))}
110 |                             </View>
111 |                             <View style={{width: ARTBORD_WIDTH,flexDirection: 'row',flexWrap: 'wrap',marginTop:10}}>
112 |                                 {Object.keys(designSystem.presetFont.height).map(index => (
113 |                                     <Text style={{width: index>0?80:200,textAlign:"center",fontSize:28}}>{designSystem.presetFont.height[index]}</Text>
114 |                                 ))}
115 |                             </View>
116 |                         </View>
117 |                     </View>
118 |                     <View name="字重">
119 |                         <View style={{width: 1200,marginLeft:100,marginBottom:100}}>
120 |                             <Text style={{fontSize:32,marginTop:100,marginBottom:16}}>字重</Text>
121 |                             <Text style={{width: 1200,fontSize:24}}>
122 |                                 字重的选择同样基于秩序、稳定、克制的原则。多数情况下，只出现 regular 以及 medium 的两种字体重量，分别对应代码中的 400 和 500。在英文字体加粗的情况下会采用 semibold 的字体重量，对应代码中的 600。
123 |                             </Text>
124 |                         </View>
125 |                     </View>
126 |                     <View name="字体颜色">
127 |                         <View style={{width: 1200,marginLeft:100,marginBottom:10}}>
128 |                             <Text style={{fontSize:32,marginTop:100,marginBottom:16}}>字体颜色</Text>
129 |                             <Text style={{width: 1200,fontSize:24,marginBottom:40}}>
130 |                                 文本颜色如果和背景颜色太接近就会难以阅读。考虑到无障碍设计的需求，我们参考了 WCAG 的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。
131 |                             </Text>
132 |                             <Image source="https://gw.alipayobjects.com/zos/rmsportal/jPbEabWakVQHosHxhQPR.png"
133 |                                    resizeMode="center"
134 |                                    style={{
135 |                                        height: 451,
136 |                                        width: 686,
137 |                                    }}></Image>
138 |                         </View>
139 |                     </View>
140 |                 </View>
141 |             </Artboard>
142 |         </Page>
143 |     );
144 | }
145 | 
146 | export default Styleguide;
147 | 


--------------------------------------------------------------------------------
/styleguide/src/processColor.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | /* eslint-disable import/no-extraneous-dependencies */
 3 | import chroma from 'chroma-js';
 4 | 
 5 | export type Color = {
 6 |   hex: string,
 7 |   contrast: number,
 8 |   accessibility: {
 9 |     aa?: boolean,
10 |     aaLarge?: boolean,
11 |     aaa?: boolean,
12 |     aaaLarge?: boolean,
13 |   },
14 | };
15 | 
16 | const minimums = {
17 |   aa: 4.5,
18 |   aaLarge: 3,
19 |   aaa: 7,
20 |   aaaLarge: 4.5,
21 | };
22 | 
23 | export default (hex: string): Color => {
24 |     const contrast = chroma.contrast(hex, 'white');
25 |     return {
26 |         hex,
27 |         contrast,
28 |         accessibility: {
29 |             aa: contrast >= minimums.aa,
30 |             aaLarge: contrast >= minimums.aaLarge,
31 |             aaa: contrast >= minimums.aaa,
32 |             aaaLarge: contrast >= minimums.aaaLarge,
33 |         },
34 |     };
35 | };
36 | 


--------------------------------------------------------------------------------
/styleguide/styleguide.sketchplugin/Contents/Sketch/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compatibleVersion": 1,
 3 |   "bundleVersion": 1,
 4 |   "commands": [
 5 |     {
 6 |       "name": "react-sketchapp: Styleguide",
 7 |       "identifier": "main",
 8 |       "script": "main.js"
 9 |     }
10 |   ],
11 |   "menu": {
12 |     "isRoot": true,
13 |     "items": [
14 |       "main"
15 |     ]
16 |   },
17 |   "name": "styleguide",
18 |   "disableCocoaScriptPreprocessor": true,
19 |   "appcast": "https://raw.githubusercontent.com//master/.appcast.xml",
20 |   "author": "Jon Gold",
21 |   "authorEmail": "jon.gold@airbnb.com"
22 | }


--------------------------------------------------------------------------------