├── .prettierrc ├── assets └── icon.png ├── CHANGELOG.md ├── .gitignore ├── .eslintrc.json ├── README.md ├── tsconfig.json ├── LICENSE.md ├── package.json └── src ├── index.tsx └── fontSizes.tsx /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "singleQuote": false 4 | } -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eliperkins/raycast-ios-hig/HEAD/assets/icon.png -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # iOS Human Interface Guidelines Font Sizes Changelog 2 | 3 | ## [Initial Version] - 2022-10-05 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # misc 7 | .DS_Store 8 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "env": { 4 | "es2020": true, 5 | "node": true 6 | }, 7 | "parser": "@typescript-eslint/parser", 8 | "plugins": ["@typescript-eslint"], 9 | "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"] 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Raycast iOS Human Interface Guidelines Extension 2 | 3 | Shows you the iOS HIG's info for quick reference. 4 | 5 | Screen Shot 2022-10-06 at 1 35 06 PM 6 | 7 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Node 16", 4 | "include": ["src/**/*"], 5 | "compilerOptions": { 6 | "lib": ["es2021"], 7 | "module": "commonjs", 8 | "target": "es2021", 9 | "strict": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "skipLibCheck": true, 13 | "forceConsistentCasingInFileNames": true, 14 | "jsx": "react-jsx", 15 | "resolveJsonModule": true 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Eli Perkins 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://www.raycast.com/schemas/extension.json", 3 | "name": "raycast-ios-hig", 4 | "title": "iOS Human Interface Guidelines", 5 | "description": "Shows you the iOS HIG's info for quick reference", 6 | "icon": "icon.png", 7 | "author": "eliperkins", 8 | "owner": "eliperkins", 9 | "categories": [ 10 | "Developer Tools", 11 | "Design Tools" 12 | ], 13 | "license": "MIT", 14 | "commands": [ 15 | { 16 | "name": "index", 17 | "title": "Fonts", 18 | "description": "Shows you the iOS HIG's font sizes for quick reference", 19 | "mode": "view" 20 | } 21 | ], 22 | "dependencies": { 23 | "@raycast/api": "^1.40.3", 24 | "match-sorter": "^6.3.1" 25 | }, 26 | "devDependencies": { 27 | "@types/node": "16.10.3", 28 | "@types/react": "18.0.9", 29 | "@typescript-eslint/eslint-plugin": "^5.0.0", 30 | "@typescript-eslint/parser": "^5.0.0", 31 | "eslint": "^7.32.0", 32 | "eslint-config-prettier": "^8.3.0", 33 | "prettier": "^2.5.1", 34 | "typescript": "^4.4.3" 35 | }, 36 | "scripts": { 37 | "build": "ray build -e dist", 38 | "dev": "ray develop", 39 | "fix-lint": "ray lint --fix", 40 | "lint": "ray lint", 41 | "publish": "ray publish" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { ActionPanel, Action, List } from "@raycast/api"; 3 | import { matchSorter } from "match-sorter"; 4 | import fontSizes from "./fontSizes"; 5 | 6 | function SizeDropdown({ 7 | size, 8 | onSizeChange, 9 | }: { 10 | size: keyof typeof fontSizes; 11 | onSizeChange: (size: keyof typeof fontSizes) => void; 12 | }) { 13 | return ( 14 | { 18 | onSizeChange(newValue as keyof typeof fontSizes); 19 | }} 20 | > 21 | 22 | {Object.keys(fontSizes).map((size) => ( 23 | 24 | ))} 25 | 26 | 27 | ); 28 | } 29 | 30 | export default function Command() { 31 | const [searchText, setSearchText] = useState(""); 32 | const [size, setSize] = useState("Large"); 33 | const [filteredList, setFilteredList] = useState(fontSizes[size]); 34 | 35 | useEffect(() => { 36 | setFilteredList( 37 | matchSorter(fontSizes[size], searchText, { 38 | keys: ["name", "size", "weight"], 39 | sorter: (items) => { 40 | return items.sort((a, b) => b.item.size - a.item.size); 41 | }, 42 | }) 43 | ); 44 | }, [size, searchText]); 45 | 46 | return ( 47 | setSize(size)} />} 53 | > 54 | 55 | {filteredList.map((item) => ( 56 | 62 | 63 | {Object.keys(fontSizes).map((key) => ( 64 | setSize(key as keyof typeof fontSizes)} /> 65 | ))} 66 | 67 | 68 | } 69 | detail={} 70 | /> 71 | ))} 72 | 73 | 74 | ); 75 | } 76 | -------------------------------------------------------------------------------- /src/fontSizes.tsx: -------------------------------------------------------------------------------- 1 | // iOS Human Interface Guidelines Font Sizes by Dynamic Type sizes from https://developer.apple.com/design/human-interface-guidelines/foundations/typography/ 2 | export default { 3 | ExtraLarge: [ 4 | { 5 | name: "Large Title", 6 | size: 36, 7 | weight: "Regular", 8 | leading: 43, 9 | }, 10 | { 11 | name: "Title 1", 12 | size: 30, 13 | weight: "Regular", 14 | leading: 37, 15 | }, 16 | { 17 | name: "Title 2", 18 | size: 24, 19 | weight: "Regular", 20 | leading: 30, 21 | }, 22 | { 23 | name: "Title 3", 24 | size: 22, 25 | weight: "Regular", 26 | leading: 28, 27 | }, 28 | { 29 | name: "Headline", 30 | size: 19, 31 | weight: "Semibold", 32 | leading: 24, 33 | }, 34 | { 35 | name: "Body", 36 | size: 19, 37 | weight: "Regular", 38 | leading: 24, 39 | }, 40 | { 41 | name: "Callout", 42 | size: 18, 43 | weight: "Regular", 44 | leading: 23, 45 | }, 46 | { 47 | name: "Subhead", 48 | size: 17, 49 | weight: "Regular", 50 | leading: 22, 51 | }, 52 | { 53 | name: "Footnote", 54 | size: 15, 55 | weight: "Regular", 56 | leading: 20, 57 | }, 58 | { 59 | name: "Caption 1", 60 | size: 14, 61 | weight: "Regular", 62 | leading: 19, 63 | }, 64 | { 65 | name: "Caption 2", 66 | size: 13, 67 | weight: "Regular", 68 | leading: 18, 69 | }, 70 | ], 71 | Large: [ 72 | { 73 | name: "Large Title", 74 | weight: "Regular", 75 | size: 34, 76 | leading: 41, 77 | }, 78 | { 79 | name: "Title 1", 80 | weight: "Regular", 81 | size: 28, 82 | leading: 34, 83 | }, 84 | { 85 | name: "Title 2", 86 | weight: "Regular", 87 | size: 22, 88 | leading: 28, 89 | }, 90 | { 91 | name: "Title 3", 92 | weight: "Regular", 93 | size: 20, 94 | leading: 25, 95 | }, 96 | { 97 | name: "Headline", 98 | weight: "Semibold", 99 | size: 17, 100 | leading: 22, 101 | }, 102 | { 103 | name: "Body", 104 | weight: "Regular", 105 | size: 17, 106 | leading: 22, 107 | }, 108 | { 109 | name: "Callout", 110 | weight: "Regular", 111 | size: 16, 112 | leading: 21, 113 | }, 114 | { 115 | name: "Subhead", 116 | weight: "Regular", 117 | size: 15, 118 | leading: 20, 119 | }, 120 | { 121 | name: "Footnote", 122 | weight: "Regular", 123 | size: 13, 124 | leading: 18, 125 | }, 126 | { 127 | name: "Caption 1", 128 | weight: "Regular", 129 | size: 12, 130 | leading: 16, 131 | }, 132 | { 133 | name: "Caption 2", 134 | weight: "Regular", 135 | size: 11, 136 | leading: 13, 137 | }, 138 | ], 139 | Medium: [ 140 | { 141 | name: "Large Title", 142 | weight: "Regular", 143 | size: 30, 144 | leading: 36, 145 | }, 146 | { 147 | name: "Title 1", 148 | weight: "Regular", 149 | size: 24, 150 | leading: 30, 151 | }, 152 | { 153 | name: "Title 2", 154 | weight: "Regular", 155 | size: 20, 156 | leading: 24, 157 | }, 158 | { 159 | name: "Title 3", 160 | weight: "Regular", 161 | size: 17, 162 | leading: 22, 163 | }, 164 | { 165 | name: "Headline", 166 | weight: "Semibold", 167 | size: 15, 168 | leading: 20, 169 | }, 170 | { 171 | name: "Body", 172 | weight: "Regular", 173 | size: 15, 174 | leading: 20, 175 | }, 176 | { 177 | name: "Callout", 178 | weight: "Regular", 179 | size: 14, 180 | leading: 18, 181 | }, 182 | { 183 | name: "Subhead", 184 | weight: "Regular", 185 | size: 13, 186 | leading: 18, 187 | }, 188 | { 189 | name: "Footnote", 190 | weight: "Regular", 191 | size: 12, 192 | leading: 16, 193 | }, 194 | { 195 | name: "Caption 1", 196 | weight: "Regular", 197 | size: 11, 198 | leading: 14, 199 | }, 200 | { 201 | name: "Caption 2", 202 | weight: "Regular", 203 | size: 10, 204 | leading: 12, 205 | }, 206 | ], 207 | Small: [ 208 | { 209 | name: "Large Title", 210 | weight: "Regular", 211 | size: 26, 212 | leading: 32, 213 | }, 214 | { 215 | name: "Title 1", 216 | weight: "Regular", 217 | size: 21, 218 | leading: 26, 219 | }, 220 | { 221 | name: "Title 2", 222 | weight: "Regular", 223 | size: 17, 224 | leading: 22, 225 | }, 226 | { 227 | name: "Title 3", 228 | weight: "Regular", 229 | size: 15, 230 | leading: 20, 231 | }, 232 | { 233 | name: "Headline", 234 | weight: "Semibold", 235 | size: 13, 236 | leading: 18, 237 | }, 238 | { 239 | name: "Body", 240 | weight: "Regular", 241 | size: 13, 242 | leading: 18, 243 | }, 244 | { 245 | name: "Callout", 246 | weight: "Regular", 247 | size: 12, 248 | leading: 16, 249 | }, 250 | { 251 | name: "Subhead", 252 | weight: "Regular", 253 | size: 11, 254 | leading: 16, 255 | }, 256 | { 257 | name: "Footnote", 258 | weight: "Regular", 259 | size: 11, 260 | leading: 14, 261 | }, 262 | { 263 | name: "Caption 1", 264 | weight: "Regular", 265 | size: 10, 266 | leading: 12, 267 | }, 268 | { 269 | name: "Caption 2", 270 | weight: "Regular", 271 | size: 9, 272 | leading: 11, 273 | }, 274 | ], 275 | ExtraSmall: [ 276 | { 277 | name: "Large Title", 278 | weight: "Regular", 279 | size: 22, 280 | leading: 28, 281 | }, 282 | { 283 | name: "Title 1", 284 | weight: "Regular", 285 | size: 18, 286 | leading: 22, 287 | }, 288 | { 289 | name: "Title 2", 290 | weight: "Regular", 291 | size: 15, 292 | leading: 20, 293 | }, 294 | { 295 | name: "Title 3", 296 | weight: "Regular", 297 | size: 13, 298 | leading: 18, 299 | }, 300 | { 301 | name: "Headline", 302 | weight: "Semibold", 303 | size: 11, 304 | leading: 14, 305 | }, 306 | { 307 | name: "Body", 308 | weight: "Regular", 309 | size: 11, 310 | leading: 14, 311 | }, 312 | { 313 | name: "Callout", 314 | weight: "Regular", 315 | size: 11, 316 | leading: 14, 317 | }, 318 | { 319 | name: "Subhead", 320 | weight: "Regular", 321 | size: 10, 322 | leading: 12, 323 | }, 324 | { 325 | name: "Footnote", 326 | weight: "Regular", 327 | size: 10, 328 | leading: 12, 329 | }, 330 | { 331 | name: "Caption 1", 332 | weight: "Regular", 333 | size: 9, 334 | leading: 11, 335 | }, 336 | { 337 | name: "Caption 2", 338 | weight: "Regular", 339 | size: 9, 340 | leading: 11, 341 | }, 342 | ], 343 | }; 344 | --------------------------------------------------------------------------------