+21 -63

Justfile

reviewed

··· 5 5 NPM_DIR := "./node_modules" 6 6 SRC_DIR := "./src" 7 7 SYSTEM_DIR := "./system" 8 8 - TEMPORARY_DIR := "./elm-stuff/elm-tailwind-css" 9 8 10 9 ESBUILD := NPM_DIR + "/.bin/esbuild --target=es2018 --bundle" 11 11 - ETC_CMD := "pnpx etc" 12 10 13 11 14 12 default: dev ··· 21 19 echo "> Build completed ⚡" 22 20 23 21 24 24 - @build-prod: quality clean css elm-prod js-prod system css-prod 22 22 + @build-prod: quality clean (css "minify") elm-prod js-prod system 25 23 echo "> Production build completed 🛳" 26 24 27 25 ··· 31 29 mkdir -p {{BUILD_DIR}} 32 30 33 31 34 34 - @css: 35 35 - echo "> Compiling CSS" 36 36 - 37 37 - mkdir -p {{SRC_DIR}}/Library/Css/ 38 38 - 39 39 - {{ETC_CMD}} {{SRC_DIR}}/Css/About.css \ 40 40 - --config {{SYSTEM_DIR}}/Css/Tailwind.js \ 41 41 - --output {{BUILD_DIR}}/about.css \ 42 42 - \ 43 43 - --post-plugin-before postcss-import \ 44 44 - --post-plugin-after postcss-custom-properties 45 45 - 46 46 - {{ETC_CMD}} {{SRC_DIR}}/Css/Application.css \ 47 47 - --config {{SYSTEM_DIR}}/Css/Tailwind.js \ 48 48 - --elm-module Css.Classes \ 49 49 - --elm-path {{SRC_DIR}}/Library/Css/Classes.elm \ 50 50 - --output {{BUILD_DIR}}/application.css \ 51 51 - \ 52 52 - --post-plugin-before postcss-import \ 53 53 - --post-plugin-after postcss-custom-properties 54 54 - 55 55 - 56 56 - @css-prod: 57 57 - echo "> Optimising CSS" 58 58 - 59 59 - mkdir -p {{SRC_DIR}}/Library/Css/ 32 32 + @css minify="false": 33 33 + echo "{{ if minify == "minify" { "> Compiling CSS (optimised)" } else { "> Compiling CSS" } }}" 60 34 61 61 - NODE_ENV=production {{ETC_CMD}} {{SRC_DIR}}/Css/About.css \ 62 62 - --config {{SYSTEM_DIR}}/Css/Tailwind.js \ 63 63 - --output {{BUILD_DIR}}/about.css \ 64 64 - \ 65 65 - --post-plugin-before postcss-import \ 66 66 - --post-plugin-after postcss-custom-properties \ 67 67 - \ 68 68 - --purge-content {{BUILD_DIR}}/about/**/*.html \ 69 69 - --purge-whitelist hljs-string \ 70 70 - --purge-whitelist hljs-comment \ 71 71 - --purge-whitelist hljs-meta \ 72 72 - --purge-whitelist bash 35 35 + {{NPM_DIR}}/.bin/tailwind \ 36 36 + --input {{SRC_DIR}}/Css/About.css \ 37 37 + --output {{BUILD_DIR}}/about.css \ 38 38 + --purge {{SRC_DIR}}/Static/About/**/*.* \ 39 39 + --config {{SYSTEM_DIR}}/Css/Tailwind.js \ 40 40 + --postcss {{SYSTEM_DIR}}/Css/PostCSS.js \ 41 41 + --jit \ 42 42 + {{ if minify == "minify" { "--minify" } else { "" } }} 73 43 74 74 - NODE_ENV=production {{ETC_CMD}} {{SRC_DIR}}/Css/Application.css \ 75 75 - --config {{SYSTEM_DIR}}/Css/Tailwind.js \ 76 76 - --output {{BUILD_DIR}}/application.css \ 77 77 - \ 78 78 - --post-plugin-before postcss-import \ 79 79 - --post-plugin-after postcss-custom-properties \ 80 80 - \ 81 81 - --purge-content {{BUILD_DIR}}/ui.elm.js \ 82 82 - --purge-content {{BUILD_DIR}}/index.html \ 83 83 - --purge-whitelist button \ 84 84 - --purge-whitelist input \ 85 85 - --purge-whitelist select \ 86 86 - --purge-whitelist textarea 44 44 + {{NPM_DIR}}/.bin/tailwind \ 45 45 + --input {{SRC_DIR}}/Css/Application.css \ 46 46 + --output {{BUILD_DIR}}/application.css \ 47 47 + --purge "{{SRC_DIR}}/Static/Html/**/*.*,{{SRC_DIR}}/Applications/UI/**/*.elm,{{SRC_DIR}}/Applications/UI.elm,{{SRC_DIR}}/Library/**/*.elm" \ 48 48 + --config {{SYSTEM_DIR}}/Css/Tailwind.js \ 49 49 + --postcss {{SYSTEM_DIR}}/Css/PostCSS.js \ 50 50 + --jit \ 51 51 + {{ if minify == "minify" { "--minify" } else { "" } }} 87 52 88 53 89 54 @elm: ··· 183 148 ) 184 149 185 150 186 186 - @elm-housekeeping: reset-elm-css 151 151 + @elm-housekeeping: 187 152 echo "> Running elm-review" 188 153 {{NPM_DIR}}/.bin/elm-review {{SRC_DIR}} --config system/Review --fix-all 189 154 echo "> Running elm-format" ··· 197 162 curl --silent --show-error --fail -o ./vendor/pep.js https://raw.githubusercontent.com/mpizenberg/elm-pep/071616d75ca61e261fdefc7b55bc46c34e44ea22/elm-pep.js 198 163 199 164 200 200 - @quality: reset-elm-css 165 165 + @quality: 201 166 echo "> Running es-lint" 202 167 {{NPM_DIR}}/.bin/eslint src/Javascript/** 203 168 echo "> Running elm-review" 204 169 {{NPM_DIR}}/.bin/elm-review {{SRC_DIR}} --config system/Review 205 205 - 206 206 - 207 207 - @reset-elm-css: 208 208 - # This removes the generated Elm module for the CSS selectors, 209 209 - # and also the `tmp` dir which is related to that. 210 210 - rm -rf {{TEMPORARY_DIR}} 211 211 - rm -f {{SRC_DIR}}/Library/Css/Classes.elm 212 170 213 171 214 172 @server:

+6 -6

nix/sources.json

reviewed

··· 5 5 "homepage": "https://github.com/nmattia/niv", 6 6 "owner": "nmattia", 7 7 "repo": "niv", 8 8 - "rev": "3cd7914b2c4cff48927e11c216dadfab7d903fe5", 9 9 - "sha256": "1agq4nvbhrylf2s77kb4xhh9k7xcwdwggq764k4jgsbs70py8cw3", 8 8 + "rev": "e0ca65c81a2d7a4d82a189f1e23a48d59ad42070", 9 9 + "sha256": "1pq9nh1d8nn3xvbdny8fafzw87mj7gsmp6pxkdl65w2g18rmcmzx", 10 10 "type": "tarball", 11 11 - "url": "https://github.com/nmattia/niv/archive/3cd7914b2c4cff48927e11c216dadfab7d903fe5.tar.gz", 11 11 + "url": "https://github.com/nmattia/niv/archive/e0ca65c81a2d7a4d82a189f1e23a48d59ad42070.tar.gz", 12 12 "url_template": "https://github.com/<owner>/<repo>/archive/<rev>.tar.gz" 13 13 }, 14 14 "nixpkgs": { ··· 17 17 "homepage": null, 18 18 "owner": "NixOS", 19 19 "repo": "nixpkgs", 20 20 - "rev": "fcef64cc39816a38a0c617a7e49076fc1ab080cf", 21 21 - "sha256": "0dgbd9b1y0nqchd1qfirnk382g79cg382869c60y74mcwwr4h6g7", 20 20 + "rev": "16105403bdd843540cbef9c63fc0f16c1c6eaa70", 21 21 + "sha256": "0sl6hsxlh14kcs38jcra908nvi5hd8p8hlim3lbra55lz0kd9rcl", 22 22 "type": "tarball", 23 23 - "url": "https://github.com/NixOS/nixpkgs/archive/fcef64cc39816a38a0c617a7e49076fc1ab080cf.tar.gz", 23 23 + "url": "https://github.com/NixOS/nixpkgs/archive/16105403bdd843540cbef9c63fc0f16c1c6eaa70.tar.gz", 24 24 "url_template": "https://github.com/<owner>/<repo>/archive/<rev>.tar.gz" 25 25 } 26 26 }

+3 -2

package.json

reviewed

··· 8 8 "license": "SEE LICENSE IN LICENSE", 9 9 "devDependencies": { 10 10 "assert": "^2.0.0", 11 11 + "autoprefixer": "^10.3.1", 11 12 "buffer": "^6.0.3", 12 13 "elm-review": "^2.5.3", 13 13 - "elm-tailwind-css": "^1.1.1", 14 14 "esbuild": "^0.12.15", 15 15 "eslint": "^7.31.0", 16 16 + "postcss": "^8.3.6", 16 17 "postcss-custom-properties": "^11.0.0", 17 18 "postcss-import": "^14.0.2", 18 18 - "tailwindcss": "^1.6.2", 19 19 + "tailwindcss": "^2.2.7", 19 20 "tailwindcss-animations": "^2.0.0", 20 21 "tailwindcss-interaction-variants": "^5.0.0" 21 22 },

+370 -166

pnpm-lock.yaml

reviewed

··· 18 18 webnative-elm: 6.0.0_webnative@0.25.2 19 19 devDependencies: 20 20 assert: 2.0.0 21 21 + autoprefixer: 10.3.1_postcss@8.3.6 21 22 buffer: 6.0.3 22 23 elm-review: 2.5.3 23 23 - elm-tailwind-css: 1.1.1_tailwindcss@1.9.6 24 24 + elm-tailwind-css: 1.1.1_tailwindcss@2.2.7 24 25 esbuild: 0.12.15 25 26 eslint: 7.31.0 26 26 - postcss-custom-properties: 11.0.0 27 27 - postcss-import: 14.0.2 28 28 - tailwindcss: 1.9.6 27 27 + postcss: 8.3.6 28 28 + postcss-custom-properties: 11.0.0_postcss@8.3.6 29 29 + postcss-import: 14.0.2_postcss@8.3.6 30 30 + tailwindcss: 2.2.7_7b69a43ec4689fa7484dee35f79a7806 29 31 tailwindcss-animations: 2.0.0 30 32 tailwindcss-interaction-variants: 5.0.0 31 33 lockfileVersion: 5.2 ··· 70 72 node: ^10.12.0 || >=12.0.0 71 73 resolution: 72 74 integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw== 73 73 - /@fullhuman/postcss-purgecss/2.3.0: 74 74 - dependencies: 75 75 - postcss: 7.0.32 76 76 - purgecss: 2.3.0 77 77 - dev: true 78 78 - resolution: 79 79 - integrity: sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw== 80 75 /@fullhuman/postcss-purgecss/3.1.0-alpha.0_postcss@8.3.6: 81 76 dependencies: 82 77 postcss: 8.3.6 ··· 104 99 dev: false 105 100 resolution: 106 101 integrity: sha512-eMk0b9ReBbV23xXU693TAIrLyeO5iTgBZGSJfpqriG8UkYvr/hC9u9pyMlAakDNHWmbhMZCDs6KQO0jzKD8OTw== 102 102 + /@nodelib/fs.scandir/2.1.5: 103 103 + dependencies: 104 104 + '@nodelib/fs.stat': 2.0.5 105 105 + run-parallel: 1.2.0 106 106 + dev: true 107 107 + engines: 108 108 + node: '>= 8' 109 109 + resolution: 110 110 + integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g== 111 111 + /@nodelib/fs.stat/2.0.5: 112 112 + dev: true 113 113 + engines: 114 114 + node: '>= 8' 115 115 + resolution: 116 116 + integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A== 117 117 + /@nodelib/fs.walk/1.2.8: 118 118 + dependencies: 119 119 + '@nodelib/fs.scandir': 2.1.5 120 120 + fastq: 1.11.1 121 121 + dev: true 122 122 + engines: 123 123 + node: '>= 8' 124 124 + resolution: 125 125 + integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg== 107 126 /@protobufjs/aspromise/1.1.2: 108 127 dev: false 109 128 resolution: ··· 219 238 dev: true 220 239 resolution: 221 240 integrity: sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA== 241 241 + /@types/parse-json/4.0.0: 242 242 + dev: true 243 243 + resolution: 244 244 + integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA== 222 245 /@types/q/1.5.5: 223 246 dev: true 224 247 resolution: ··· 338 361 node: '>= 8' 339 362 resolution: 340 363 integrity: sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg== 364 364 + /anymatch/3.1.2: 365 365 + dependencies: 366 366 + normalize-path: 3.0.0 367 367 + picomatch: 2.2.2 368 368 + dev: true 369 369 + engines: 370 370 + node: '>= 8' 371 371 + resolution: 372 372 + integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== 373 373 + /arg/5.0.0: 374 374 + dev: true 375 375 + resolution: 376 376 + integrity: sha512-4P8Zm2H+BRS+c/xX1LrHw0qKpEhdlZjLCgWy+d78T9vqa2Z2SiD2wMrYuWIAFy5IZUD7nnNXroRttz+0RzlrzQ== 341 377 /argparse/1.0.10: 342 378 dependencies: 343 379 sprintf-js: 1.0.3 ··· 397 433 postcss: ^8.1.0 398 434 resolution: 399 435 integrity: sha512-hmjYejN/WTyPP9cdNmiwtwqM8/ACVJPD5ExtwoOceQohNbgnFNiwpL2+U4bXS8aXozBL00WvH6WhqbuHf0Fgfg== 400 400 - /autoprefixer/9.8.6: 436 436 + /autoprefixer/10.3.1_postcss@8.3.6: 401 437 dependencies: 402 402 - browserslist: 4.14.7 438 438 + browserslist: 4.16.6 403 439 caniuse-lite: 1.0.30001246 404 404 - colorette: 1.2.1 440 440 + colorette: 1.2.2 441 441 + fraction.js: 4.1.1 405 442 normalize-range: 0.1.2 406 406 - num2fraction: 1.2.2 407 407 - postcss: 7.0.35 443 443 + postcss: 8.3.6 408 444 postcss-value-parser: 4.1.0 409 445 dev: true 446 446 + engines: 447 447 + node: ^10 || ^12 || >=14 410 448 hasBin: true 449 449 + peerDependencies: 450 450 + postcss: ^8.1.0 411 451 resolution: 412 412 - integrity: sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg== 452 452 + integrity: sha512-L8AmtKzdiRyYg7BUXJTzigmhbQRCXFKz6SA1Lqo0+AR2FBbQ4aTAPFSDlOutnFkjhiz8my4agGXog1xlMjPJ6A== 413 453 /available-typed-arrays/1.0.4: 414 454 engines: 415 455 node: '>= 0.4' ··· 514 554 hasBin: true 515 555 resolution: 516 556 integrity: sha512-BSVRLCeG3Xt/j/1cCGj1019Wbty0H+Yvu2AOuZSuoaUWn3RatbL33Cxk+Q4jRMRAbOm0p7SLravLjpnT6s0vzQ== 557 557 + /browserslist/4.16.6: 558 558 + dependencies: 559 559 + caniuse-lite: 1.0.30001246 560 560 + colorette: 1.2.2 561 561 + electron-to-chromium: 1.3.785 562 562 + escalade: 3.1.1 563 563 + node-releases: 1.1.73 564 564 + dev: true 565 565 + engines: 566 566 + node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7 567 567 + hasBin: true 568 568 + resolution: 569 569 + integrity: sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ== 517 570 /buffer/5.7.1: 518 571 dependencies: 519 572 base64-js: 1.5.1 ··· 634 687 node: '>=4' 635 688 resolution: 636 689 integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== 637 637 - /chalk/4.1.0: 638 638 - dependencies: 639 639 - ansi-styles: 4.3.0 640 640 - supports-color: 7.2.0 641 641 - dev: true 642 642 - engines: 643 643 - node: '>=10' 644 644 - resolution: 645 645 - integrity: sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A== 646 690 /chalk/4.1.1: 647 691 dependencies: 648 692 ansi-styles: 4.3.0 ··· 668 712 fsevents: 2.1.3 669 713 resolution: 670 714 integrity: sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ== 715 715 + /chokidar/3.5.2: 716 716 + dependencies: 717 717 + anymatch: 3.1.2 718 718 + braces: 3.0.2 719 719 + glob-parent: 5.1.2 720 720 + is-binary-path: 2.1.0 721 721 + is-glob: 4.0.1 722 722 + normalize-path: 3.0.0 723 723 + readdirp: 3.6.0 724 724 + dev: true 725 725 + engines: 726 726 + node: '>= 8.10.0' 727 727 + optionalDependencies: 728 728 + fsevents: 2.3.2 729 729 + resolution: 730 730 + integrity: sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ== 671 731 /cids/1.1.7: 672 732 dependencies: 673 733 multibase: 4.0.4 ··· 749 809 dev: true 750 810 resolution: 751 811 integrity: sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw== 812 812 + /color-string/1.6.0: 813 813 + dependencies: 814 814 + color-name: 1.1.4 815 815 + simple-swizzle: 0.2.2 816 816 + dev: true 817 817 + resolution: 818 818 + integrity: sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA== 752 819 /color/3.1.3: 753 820 dependencies: 754 821 color-convert: 1.9.3 ··· 756 823 dev: true 757 824 resolution: 758 825 integrity: sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ== 759 759 - /colorette/1.2.1: 826 826 + /color/3.2.1: 827 827 + dependencies: 828 828 + color-convert: 1.9.3 829 829 + color-string: 1.6.0 760 830 dev: true 761 831 resolution: 762 762 - integrity: sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw== 832 832 + integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA== 763 833 /colorette/1.2.2: 764 834 dev: true 765 835 resolution: ··· 768 838 dev: false 769 839 resolution: 770 840 integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== 771 771 - /commander/5.1.0: 772 772 - dev: true 773 773 - engines: 774 774 - node: '>= 6' 775 775 - resolution: 776 776 - integrity: sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg== 777 841 /commander/6.2.0: 778 842 dev: true 779 843 engines: ··· 804 868 node: '>=4' 805 869 resolution: 806 870 integrity: sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA== 871 871 + /cosmiconfig/7.0.0: 872 872 + dependencies: 873 873 + '@types/parse-json': 4.0.0 874 874 + import-fresh: 3.3.0 875 875 + parse-json: 5.1.0 876 876 + path-type: 4.0.0 877 877 + yaml: 1.10.2 878 878 + dev: true 879 879 + engines: 880 880 + node: '>=10' 881 881 + resolution: 882 882 + integrity: sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA== 807 883 /cross-spawn/7.0.3: 808 884 dependencies: 809 885 path-key: 3.1.1 ··· 1057 1133 hasBin: true 1058 1134 resolution: 1059 1135 integrity: sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg== 1136 1136 + /didyoumean/1.2.2: 1137 1137 + dev: true 1138 1138 + resolution: 1139 1139 + integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw== 1140 1140 + /dlv/1.1.3: 1141 1141 + dev: true 1142 1142 + resolution: 1143 1143 + integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA== 1060 1144 /dns-over-http-resolver/1.2.3: 1061 1145 dependencies: 1062 1146 debug: 4.3.2 ··· 1111 1195 dev: true 1112 1196 resolution: 1113 1197 integrity: sha512-eFDC+yVQpEhtlapk4CYDPfV9ajF9cEof5TBcO49L1ETO+aYogrKWDmYpZyxBScMNe8Bo/gJamH4amQ4yyvXg4g== 1198 1198 + /electron-to-chromium/1.3.785: 1199 1199 + dev: true 1200 1200 + resolution: 1201 1201 + integrity: sha512-WmCgAeURsMFiyoJ646eUaJQ7GNfvMRLXo+GamUyKVNEM4MqTAsXyC0f38JEB4N3BtbD0tlAKozGP5E2T9K3YGg== 1114 1202 /elliptic/6.5.4: 1115 1203 dependencies: 1116 1204 bn.js: 4.12.0 ··· 1150 1238 hasBin: true 1151 1239 resolution: 1152 1240 integrity: sha512-IshEsmfS/3Ho3c6f5VEyulHY7Hzs4Fz1yXX2Rgl6Y0pWX/61vxybWG8UIs3KOo4RsEcHzHAWmUYShpJzH1utNQ== 1153 1153 - /elm-tailwind-css/1.1.1_tailwindcss@1.9.6: 1241 1241 + /elm-tailwind-css/1.1.1_tailwindcss@2.2.7: 1154 1242 dependencies: 1155 1243 '@fullhuman/postcss-purgecss': 3.1.0-alpha.0_postcss@8.3.6 1156 1244 autoprefixer: 10.0.4_postcss@8.3.6 ··· 1159 1247 hash-wasm: 4.4.1 1160 1248 meow: 8.0.0 1161 1249 postcss: 8.3.6 1162 1162 - tailwindcss: 1.9.6 1250 1250 + tailwindcss: 2.2.7_7b69a43ec4689fa7484dee35f79a7806 1163 1251 dev: true 1164 1252 hasBin: true 1165 1253 peerDependencies: ··· 1410 1498 dev: true 1411 1499 resolution: 1412 1500 integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== 1501 1501 + /fast-glob/3.2.7: 1502 1502 + dependencies: 1503 1503 + '@nodelib/fs.stat': 2.0.5 1504 1504 + '@nodelib/fs.walk': 1.2.8 1505 1505 + glob-parent: 5.1.2 1506 1506 + merge2: 1.4.1 1507 1507 + micromatch: 4.0.4 1508 1508 + dev: true 1509 1509 + engines: 1510 1510 + node: '>=8' 1511 1511 + resolution: 1512 1512 + integrity: sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q== 1413 1513 /fast-json-stable-stringify/2.1.0: 1414 1514 dev: true 1415 1515 resolution: ··· 1436 1536 dev: true 1437 1537 resolution: 1438 1538 integrity: sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow== 1539 1539 + /fastq/1.11.1: 1540 1540 + dependencies: 1541 1541 + reusify: 1.0.4 1542 1542 + dev: true 1543 1543 + resolution: 1544 1544 + integrity: sha512-HOnr8Mc60eNYl1gzwp6r5RoUyAn5/glBolUzP/Ez6IFVPMPirxn/9phgL6zhOtaTy7ISwPvQ+wT+hfcRZh/bzw== 1439 1545 /file-entry-cache/6.0.1: 1440 1546 dependencies: 1441 1547 flat-cache: 3.0.4 ··· 1518 1624 /foreach/2.0.5: 1519 1625 resolution: 1520 1626 integrity: sha1-C+4AUBiusmDQo6865ljdATbsG5k= 1521 1521 - /fs-extra/8.1.0: 1627 1627 + /fraction.js/4.1.1: 1628 1628 + dev: true 1629 1629 + resolution: 1630 1630 + integrity: sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg== 1631 1631 + /fs-extra/10.0.0: 1522 1632 dependencies: 1523 1633 graceful-fs: 4.2.4 1524 1524 - jsonfile: 4.0.0 1525 1525 - universalify: 0.1.2 1634 1634 + jsonfile: 6.1.0 1635 1635 + universalify: 2.0.0 1526 1636 dev: true 1527 1637 engines: 1528 1528 - node: '>=6 <7 || >=8' 1638 1638 + node: '>=12' 1529 1639 resolution: 1530 1530 - integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g== 1640 1640 + integrity: sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ== 1531 1641 /fs-extra/9.0.1: 1532 1642 dependencies: 1533 1643 at-least-node: 1.0.0 ··· 1553 1663 - darwin 1554 1664 resolution: 1555 1665 integrity: sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ== 1666 1666 + /fsevents/2.3.2: 1667 1667 + dev: true 1668 1668 + engines: 1669 1669 + node: ^8.16.0 || ^10.6.0 || >=11.0.0 1670 1670 + optional: true 1671 1671 + os: 1672 1672 + - darwin 1673 1673 + resolution: 1674 1674 + integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== 1556 1675 /function-bind/1.1.1: 1557 1676 resolution: 1558 1677 integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== ··· 1583 1702 node: '>= 6' 1584 1703 resolution: 1585 1704 integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== 1586 1586 - /glob/7.1.6: 1705 1705 + /glob-parent/6.0.1: 1587 1706 dependencies: 1588 1588 - fs.realpath: 1.0.0 1589 1589 - inflight: 1.0.6 1590 1590 - inherits: 2.0.4 1591 1591 - minimatch: 3.0.4 1592 1592 - once: 1.4.0 1593 1593 - path-is-absolute: 1.0.1 1707 1707 + is-glob: 4.0.1 1594 1708 dev: true 1709 1709 + engines: 1710 1710 + node: '>=10.13.0' 1595 1711 resolution: 1596 1596 - integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== 1712 1712 + integrity: sha512-kEVjS71mQazDBHKcsq4E9u/vUzaLcw1A8EtUeydawvIWQCJM0qQ08G1H7/XTjFUulla6XQiDOG6MXSaG0HDKog== 1597 1713 /glob/7.1.7: 1598 1714 dependencies: 1599 1715 fs.realpath: 1.0.0 ··· 1738 1854 dev: false 1739 1855 resolution: 1740 1856 integrity: sha1-nbHb0Pr43m++D13V5Wu2BigN5ps= 1857 1857 + /import-cwd/3.0.0: 1858 1858 + dependencies: 1859 1859 + import-from: 3.0.0 1860 1860 + dev: true 1861 1861 + engines: 1862 1862 + node: '>=8' 1863 1863 + resolution: 1864 1864 + integrity: sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg== 1741 1865 /import-fresh/2.0.0: 1742 1866 dependencies: 1743 1867 caller-path: 2.0.0 ··· 1756 1880 node: '>=6' 1757 1881 resolution: 1758 1882 integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw== 1883 1883 + /import-from/3.0.0: 1884 1884 + dependencies: 1885 1885 + resolve-from: 5.0.0 1886 1886 + dev: true 1887 1887 + engines: 1888 1888 + node: '>=8' 1889 1889 + resolution: 1890 1890 + integrity: sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ== 1759 1891 /imurmurhash/0.1.4: 1760 1892 dev: true 1761 1893 engines: ··· 1883 2015 dev: true 1884 2016 resolution: 1885 2017 integrity: sha1-z/9HGu5N1cnhWFmPvhKWe1za00U= 1886 1886 - /is-core-module/2.2.0: 1887 1887 - dependencies: 1888 1888 - has: 1.0.3 1889 1889 - dev: true 1890 1890 - resolution: 1891 1891 - integrity: sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ== 1892 2018 /is-core-module/2.5.0: 1893 2019 dependencies: 1894 2020 has: 1.0.3 ··· 2102 2228 dev: false 2103 2229 resolution: 2104 2230 integrity: sha1-py8hfcSvxGKf/1/rME3BvVGi89I= 2105 2105 - /jsonfile/4.0.0: 2106 2106 - dev: true 2107 2107 - optionalDependencies: 2108 2108 - graceful-fs: 4.2.4 2109 2109 - resolution: 2110 2110 - integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss= 2111 2231 /jsonfile/6.1.0: 2112 2232 dependencies: 2113 2233 universalify: 2.0.0 ··· 2196 2316 dev: false 2197 2317 resolution: 2198 2318 integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ== 2319 2319 + /lilconfig/2.0.3: 2320 2320 + dev: true 2321 2321 + engines: 2322 2322 + node: '>=10' 2323 2323 + resolution: 2324 2324 + integrity: sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg== 2199 2325 /lines-and-columns/1.1.6: 2200 2326 dev: true 2201 2327 resolution: ··· 2242 2368 dev: true 2243 2369 resolution: 2244 2370 integrity: sha1-JMS/zWsvuji/0FlNsRedjptlZWE= 2371 2371 + /lodash.topath/4.5.2: 2372 2372 + dev: true 2373 2373 + resolution: 2374 2374 + integrity: sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak= 2245 2375 /lodash.truncate/4.4.2: 2246 2376 dev: true 2247 2377 resolution: ··· 2253 2383 /lodash/4.17.20: 2254 2384 resolution: 2255 2385 integrity: sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== 2386 2386 + /lodash/4.17.21: 2387 2387 + dev: true 2388 2388 + resolution: 2389 2389 + integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== 2256 2390 /log-symbols/4.1.0: 2257 2391 dependencies: 2258 2392 chalk: 4.1.1 ··· 2332 2466 node: '>=10' 2333 2467 resolution: 2334 2468 integrity: sha512-nbsTRz2fwniJBFgUkcdISq8y/q9n9VbiHYbfwklFh5V4V2uAcxtKQkDc0yCLPM/kP0d+inZBewn3zJqewHE7kg== 2469 2469 + /merge2/1.4.1: 2470 2470 + dev: true 2471 2471 + engines: 2472 2472 + node: '>= 8' 2473 2473 + resolution: 2474 2474 + integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg== 2475 2475 + /micromatch/4.0.4: 2476 2476 + dependencies: 2477 2477 + braces: 3.0.2 2478 2478 + picomatch: 2.3.0 2479 2479 + dev: true 2480 2480 + engines: 2481 2481 + node: '>=8.6' 2482 2482 + resolution: 2483 2483 + integrity: sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg== 2335 2484 /mimic-fn/2.1.0: 2336 2485 dev: true 2337 2486 engines: ··· 2389 2538 hasBin: true 2390 2539 resolution: 2391 2540 integrity: sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ== 2541 2541 + /modern-normalize/1.1.0: 2542 2542 + dev: true 2543 2543 + engines: 2544 2544 + node: '>=6' 2545 2545 + resolution: 2546 2546 + integrity: sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA== 2392 2547 /ms/2.1.2: 2393 2548 resolution: 2394 2549 integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== ··· 2577 2732 dev: true 2578 2733 resolution: 2579 2734 integrity: sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg== 2735 2735 + /node-releases/1.1.73: 2736 2736 + dev: true 2737 2737 + resolution: 2738 2738 + integrity: sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg== 2580 2739 /normalize-package-data/2.5.0: 2581 2740 dependencies: 2582 2741 hosted-git-info: 2.8.8 ··· 2621 2780 node: '>=8' 2622 2781 resolution: 2623 2782 integrity: sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ== 2624 2624 - /normalize.css/8.0.1: 2625 2625 - dev: true 2626 2626 - resolution: 2627 2627 - integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg== 2628 2783 /nth-check/1.0.2: 2629 2784 dependencies: 2630 2785 boolbase: 1.0.0 ··· 2635 2790 dev: true 2636 2791 resolution: 2637 2792 integrity: sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4= 2638 2638 - /object-assign/4.1.1: 2639 2639 - dev: true 2640 2640 - engines: 2641 2641 - node: '>=0.10.0' 2642 2642 - resolution: 2643 2643 - integrity: sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= 2644 2644 - /object-hash/2.0.3: 2793 2793 + /object-hash/2.2.0: 2645 2794 dev: true 2646 2795 engines: 2647 2796 node: '>= 6' 2648 2797 resolution: 2649 2649 - integrity: sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg== 2798 2798 + integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw== 2650 2799 /object-inspect/1.11.0: 2651 2800 resolution: 2652 2801 integrity: sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg== ··· 2846 2995 node: '>=8' 2847 2996 resolution: 2848 2997 integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== 2849 2849 - /path-parse/1.0.6: 2998 2998 + /path-parse/1.0.7: 2850 2999 dev: true 2851 3000 resolution: 2852 2852 - integrity: sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== 2853 2853 - /path-parse/1.0.7: 3001 3001 + integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== 3002 3002 + /path-type/4.0.0: 2854 3003 dev: true 3004 3004 + engines: 3005 3005 + node: '>=8' 2855 3006 resolution: 2856 2856 - integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== 3007 3007 + integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== 2857 3008 /peek-readable/3.1.0: 2858 3009 dev: false 2859 3010 engines: ··· 2902 3053 node: '>=8.6' 2903 3054 resolution: 2904 3055 integrity: sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg== 3056 3056 + /picomatch/2.3.0: 3057 3057 + dev: true 3058 3058 + engines: 3059 3059 + node: '>=8.6' 3060 3060 + resolution: 3061 3061 + integrity: sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw== 2905 3062 /pify/2.3.0: 2906 3063 dev: true 2907 3064 engines: ··· 2937 3094 node: '>=6.9.0' 2938 3095 resolution: 2939 3096 integrity: sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ== 2940 2940 - /postcss-custom-properties/11.0.0: 3097 3097 + /postcss-custom-properties/11.0.0_postcss@8.3.6: 2941 3098 dependencies: 3099 3099 + postcss: 8.3.6 2942 3100 postcss-values-parser: 4.0.0 2943 3101 dev: true 2944 3102 engines: ··· 2979 3137 node: '>=6.9.0' 2980 3138 resolution: 2981 3139 integrity: sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg== 2982 2982 - /postcss-functions/3.0.0: 3140 3140 + /postcss-import/14.0.2_postcss@8.3.6: 2983 3141 dependencies: 2984 2984 - glob: 7.1.6 2985 2985 - object-assign: 4.1.1 2986 2986 - postcss: 6.0.23 2987 2987 - postcss-value-parser: 3.3.1 2988 2988 - dev: true 2989 2989 - resolution: 2990 2990 - integrity: sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4= 2991 2991 - /postcss-import/14.0.2: 2992 2992 - dependencies: 3142 3142 + postcss: 8.3.6 2993 3143 postcss-value-parser: 4.1.0 2994 3144 read-cache: 1.0.0 2995 3145 resolve: 1.20.0 ··· 3000 3150 postcss: ^8.0.0 3001 3151 resolution: 3002 3152 integrity: sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g== 3003 3003 - /postcss-js/2.0.3: 3153 3153 + /postcss-js/3.0.3: 3004 3154 dependencies: 3005 3155 camelcase-css: 2.0.1 3006 3006 - postcss: 7.0.35 3156 3156 + postcss: 8.3.6 3007 3157 dev: true 3158 3158 + engines: 3159 3159 + node: '>=10.0' 3008 3160 resolution: 3009 3009 - integrity: sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w== 3161 3161 + integrity: sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw== 3162 3162 + /postcss-load-config/3.1.0: 3163 3163 + dependencies: 3164 3164 + import-cwd: 3.0.0 3165 3165 + lilconfig: 2.0.3 3166 3166 + yaml: 1.10.2 3167 3167 + dev: true 3168 3168 + engines: 3169 3169 + node: '>= 10' 3170 3170 + peerDependencies: 3171 3171 + ts-node: '>=9.0.0' 3172 3172 + peerDependenciesMeta: 3173 3173 + ts-node: 3174 3174 + optional: true 3175 3175 + resolution: 3176 3176 + integrity: sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g== 3010 3177 /postcss-merge-longhand/4.0.11: 3011 3178 dependencies: 3012 3179 css-color-names: 0.0.4 ··· 3075 3242 node: '>=6.9.0' 3076 3243 resolution: 3077 3244 integrity: sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g== 3078 3078 - /postcss-nested/4.2.3: 3245 3245 + /postcss-nested/5.0.5_postcss@8.3.6: 3079 3246 dependencies: 3080 3080 - postcss: 7.0.35 3081 3081 - postcss-selector-parser: 6.0.4 3247 3247 + postcss: 8.3.6 3248 3248 + postcss-selector-parser: 6.0.6 3082 3249 dev: true 3250 3250 + engines: 3251 3251 + node: '>=10.0' 3252 3252 + peerDependencies: 3253 3253 + postcss: ^8.1.13 3083 3254 resolution: 3084 3084 - integrity: sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw== 3255 3255 + integrity: sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew== 3085 3256 /postcss-normalize-charset/4.0.1: 3086 3257 dependencies: 3087 3258 postcss: 7.0.36 ··· 3225 3396 node: '>=4' 3226 3397 resolution: 3227 3398 integrity: sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw== 3399 3399 + /postcss-selector-parser/6.0.6: 3400 3400 + dependencies: 3401 3401 + cssesc: 3.0.0 3402 3402 + util-deprecate: 1.0.2 3403 3403 + dev: true 3404 3404 + engines: 3405 3405 + node: '>=4' 3406 3406 + resolution: 3407 3407 + integrity: sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg== 3228 3408 /postcss-svgo/4.0.3: 3229 3409 dependencies: 3230 3410 postcss: 7.0.36 ··· 3263 3443 node: '>=10' 3264 3444 resolution: 3265 3445 integrity: sha512-R9x2D87FcbhwXUmoCXJR85M1BLII5suXRuXibGYyBJ7lVDEpRIdKZh4+8q5S+/+A4m0IoG1U5tFw39asyhX/Hw== 3266 3266 - /postcss/6.0.23: 3267 3267 - dependencies: 3268 3268 - chalk: 2.4.2 3269 3269 - source-map: 0.6.1 3270 3270 - supports-color: 5.5.0 3271 3271 - dev: true 3272 3272 - engines: 3273 3273 - node: '>=4.0.0' 3274 3274 - resolution: 3275 3275 - integrity: sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag== 3276 3276 - /postcss/7.0.32: 3277 3277 - dependencies: 3278 3278 - chalk: 2.4.2 3279 3279 - source-map: 0.6.1 3280 3280 - supports-color: 6.1.0 3281 3281 - dev: true 3282 3282 - engines: 3283 3283 - node: '>=6.0.0' 3284 3284 - resolution: 3285 3285 - integrity: sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw== 3286 3286 - /postcss/7.0.35: 3287 3287 - dependencies: 3288 3288 - chalk: 2.4.2 3289 3289 - source-map: 0.6.1 3290 3290 - supports-color: 6.1.0 3291 3291 - dev: true 3292 3292 - engines: 3293 3293 - node: '>=6.0.0' 3294 3294 - resolution: 3295 3295 - integrity: sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg== 3296 3446 /postcss/7.0.36: 3297 3447 dependencies: 3298 3448 chalk: 2.4.2 ··· 3390 3540 node: '>=6' 3391 3541 resolution: 3392 3542 integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A== 3393 3393 - /purgecss/2.3.0: 3543 3543 + /purgecss/3.1.3: 3394 3544 dependencies: 3395 3395 - commander: 5.1.0 3396 3396 - glob: 7.1.6 3397 3397 - postcss: 7.0.32 3545 3545 + commander: 6.2.0 3546 3546 + glob: 7.1.7 3547 3547 + postcss: 8.3.6 3398 3548 postcss-selector-parser: 6.0.4 3399 3549 dev: true 3400 3550 hasBin: true 3401 3551 resolution: 3402 3402 - integrity: sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ== 3403 3403 - /purgecss/3.1.3: 3552 3552 + integrity: sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ== 3553 3553 + /purgecss/4.0.3: 3404 3554 dependencies: 3405 3555 commander: 6.2.0 3406 3556 glob: 7.1.7 3407 3557 postcss: 8.3.6 3408 3408 - postcss-selector-parser: 6.0.4 3558 3558 + postcss-selector-parser: 6.0.6 3409 3559 dev: true 3410 3560 hasBin: true 3411 3561 resolution: 3412 3412 - integrity: sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ== 3562 3562 + integrity: sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw== 3413 3563 /q/1.5.1: 3414 3564 dev: true 3415 3565 engines: ··· 3417 3567 teleport: '>=0.2.0' 3418 3568 resolution: 3419 3569 integrity: sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc= 3570 3570 + /queue-microtask/1.2.3: 3571 3571 + dev: true 3572 3572 + resolution: 3573 3573 + integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== 3420 3574 /quick-lru/4.0.1: 3421 3575 dev: true 3422 3576 engines: 3423 3577 node: '>=8' 3424 3578 resolution: 3425 3579 integrity: sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g== 3580 3580 + /quick-lru/5.1.1: 3581 3581 + dev: true 3582 3582 + engines: 3583 3583 + node: '>=10' 3584 3584 + resolution: 3585 3585 + integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== 3426 3586 /read-cache/1.0.0: 3427 3587 dependencies: 3428 3588 pify: 2.3.0 ··· 3487 3647 node: '>=8.10.0' 3488 3648 resolution: 3489 3649 integrity: sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ== 3650 3650 + /readdirp/3.6.0: 3651 3651 + dependencies: 3652 3652 + picomatch: 2.2.2 3653 3653 + dev: true 3654 3654 + engines: 3655 3655 + node: '>=8.10.0' 3656 3656 + resolution: 3657 3657 + integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== 3490 3658 /receptacle/1.3.2: 3491 3659 dependencies: 3492 3660 ms: 2.1.3 ··· 3502 3670 node: '>=8' 3503 3671 resolution: 3504 3672 integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg== 3505 3505 - /reduce-css-calc/2.1.7: 3673 3673 + /reduce-css-calc/2.1.8: 3506 3674 dependencies: 3507 3675 css-unit-converter: 1.1.2 3508 3676 postcss-value-parser: 3.3.1 3509 3677 dev: true 3510 3678 resolution: 3511 3511 - integrity: sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA== 3679 3679 + integrity: sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg== 3512 3680 /reflect-metadata/0.1.13: 3513 3681 dev: false 3514 3682 resolution: ··· 3551 3719 node: '>=4' 3552 3720 resolution: 3553 3721 integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== 3554 3554 - /resolve/1.19.0: 3555 3555 - dependencies: 3556 3556 - is-core-module: 2.2.0 3557 3557 - path-parse: 1.0.6 3722 3722 + /resolve-from/5.0.0: 3558 3723 dev: true 3724 3724 + engines: 3725 3725 + node: '>=8' 3559 3726 resolution: 3560 3560 - integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg== 3727 3727 + integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw== 3561 3728 /resolve/1.20.0: 3562 3729 dependencies: 3563 3730 is-core-module: 2.5.0 ··· 3586 3753 node: '>= 4' 3587 3754 resolution: 3588 3755 integrity: sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg== 3756 3756 + /reusify/1.0.4: 3757 3757 + dev: true 3758 3758 + engines: 3759 3759 + iojs: '>=1.0.0' 3760 3760 + node: '>=0.10.0' 3761 3761 + resolution: 3762 3762 + integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== 3589 3763 /rgb-regex/1.0.1: 3590 3764 dev: true 3591 3765 resolution: ··· 3608 3782 hasBin: true 3609 3783 resolution: 3610 3784 integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA== 3785 3785 + /run-parallel/1.2.0: 3786 3786 + dependencies: 3787 3787 + queue-microtask: 1.2.3 3788 3788 + dev: true 3789 3789 + resolution: 3790 3790 + integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA== 3611 3791 /run/1.4.0: 3612 3792 dependencies: 3613 3793 minimatch: 3.0.4 ··· 3929 4109 dev: true 3930 4110 resolution: 3931 4111 integrity: sha512-Tmx9HjwuNA3G7cLUcebGkNchKkNVIZXBroxa0LBoq/KUb/xEKEM8qugUG7QczSNPhaZzpXmo3IzPkRhf4tDaOQ== 3932 3932 - /tailwindcss/1.9.6: 4112 4112 + /tailwindcss/2.2.7_7b69a43ec4689fa7484dee35f79a7806: 3933 4113 dependencies: 3934 3934 - '@fullhuman/postcss-purgecss': 2.3.0 3935 3935 - autoprefixer: 9.8.6 3936 3936 - browserslist: 4.14.7 4114 4114 + arg: 5.0.0 4115 4115 + autoprefixer: 10.3.1_postcss@8.3.6 3937 4116 bytes: 3.1.0 3938 3938 - chalk: 4.1.0 3939 3939 - color: 3.1.3 4117 4117 + chalk: 4.1.1 4118 4118 + chokidar: 3.5.2 4119 4119 + color: 3.2.1 4120 4120 + cosmiconfig: 7.0.0 3940 4121 detective: 5.2.0 3941 3941 - fs-extra: 8.1.0 4122 4122 + didyoumean: 1.2.2 4123 4123 + dlv: 1.1.3 4124 4124 + fast-glob: 3.2.7 4125 4125 + fs-extra: 10.0.0 4126 4126 + glob-parent: 6.0.1 3942 4127 html-tags: 3.1.0 3943 3943 - lodash: 4.17.20 4128 4128 + is-glob: 4.0.1 4129 4129 + lodash: 4.17.21 4130 4130 + lodash.topath: 4.5.2 4131 4131 + modern-normalize: 1.1.0 3944 4132 node-emoji: 1.10.0 3945 3945 - normalize.css: 8.0.1 3946 3946 - object-hash: 2.0.3 3947 3947 - postcss: 7.0.35 3948 3948 - postcss-functions: 3.0.0 3949 3949 - postcss-js: 2.0.3 3950 3950 - postcss-nested: 4.2.3 3951 3951 - postcss-selector-parser: 6.0.4 4133 4133 + normalize-path: 3.0.0 4134 4134 + object-hash: 2.2.0 4135 4135 + postcss: 8.3.6 4136 4136 + postcss-js: 3.0.3 4137 4137 + postcss-load-config: 3.1.0 4138 4138 + postcss-nested: 5.0.5_postcss@8.3.6 4139 4139 + postcss-selector-parser: 6.0.6 3952 4140 postcss-value-parser: 4.1.0 3953 4141 pretty-hrtime: 1.0.3 3954 3954 - reduce-css-calc: 2.1.7 3955 3955 - resolve: 1.19.0 4142 4142 + purgecss: 4.0.3 4143 4143 + quick-lru: 5.1.1 4144 4144 + reduce-css-calc: 2.1.8 4145 4145 + resolve: 1.20.0 4146 4146 + tmp: 0.2.1 3956 4147 dev: true 3957 4148 engines: 3958 3958 - node: '>=8.9.0' 4149 4149 + node: '>=12.13.0' 3959 4150 hasBin: true 4151 4151 + peerDependencies: 4152 4152 + autoprefixer: ^10.0.2 4153 4153 + postcss: ^8.0.9 3960 4154 resolution: 3961 3961 - integrity: sha512-nY8WYM/RLPqGsPEGEV2z63riyQPcHYZUJpAwdyBzVpxQHOHqHE+F/fvbCeXhdF1+TA5l72vSkZrtYCB9hRcwkQ== 4155 4155 + integrity: sha512-jv35rugP5j8PpzbXnsria7ZAry7Evh0KtQ4MZqNd+PhF+oIKPwJTVwe/rmfRx9cZw3W7iPZyzBmeoAoNwfJ1yg== 3962 4156 /temp/0.9.4: 3963 4157 dependencies: 3964 4158 mkdirp: 0.5.5 ··· 3995 4189 dev: true 3996 4190 resolution: 3997 4191 integrity: sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= 4192 4192 + /tmp/0.2.1: 4193 4193 + dependencies: 4194 4194 + rimraf: 3.0.2 4195 4195 + dev: true 4196 4196 + engines: 4197 4197 + node: '>=8.17.0' 4198 4198 + resolution: 4199 4199 + integrity: sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ== 3998 4200 /to-readable-stream/2.1.0: 3999 4201 dev: true 4000 4202 engines: ··· 4115 4317 dev: true 4116 4318 resolution: 4117 4319 integrity: sha1-/+3ks2slKQaW5uFl1KWe25mOawI= 4118 4118 - /universalify/0.1.2: 4119 4119 - dev: true 4120 4120 - engines: 4121 4121 - node: '>= 4.0.0' 4122 4122 - resolution: 4123 4123 - integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg== 4124 4320 /universalify/1.0.0: 4125 4321 dev: true 4126 4322 engines: ··· 4329 4525 dev: true 4330 4526 resolution: 4331 4527 integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== 4528 4528 + /yaml/1.10.2: 4529 4529 + dev: true 4530 4530 + engines: 4531 4531 + node: '>= 6' 4532 4532 + resolution: 4533 4533 + integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg== 4332 4534 /yargs-parser/20.2.4: 4333 4535 dev: true 4334 4536 engines: ··· 4363 4565 specifiers: 4364 4566 '@tokenizer/http': ^0.6.0 4365 4567 assert: ^2.0.0 4568 4568 + autoprefixer: ^10.3.1 4366 4569 buffer: ^6.0.3 4367 4570 delay: ^5.0.0 4368 4571 elm-review: ^2.5.3 ··· 4378 4581 lunr: ^2.3.8 4379 4582 music-metadata-browser: ^2.4.0 4380 4583 p-retry: ^4.6.1 4584 4584 + postcss: ^8.3.6 4381 4585 postcss-custom-properties: ^11.0.0 4382 4586 postcss-import: ^14.0.2 4383 4587 remotestoragejs: ^1.2.3 4384 4588 subworkers: ^1.0.1 4385 4385 - tailwindcss: ^1.6.2 4589 4589 + tailwindcss: ^2.2.7 4386 4590 tailwindcss-animations: ^2.0.0 4387 4591 tailwindcss-interaction-variants: ^5.0.0 4388 4592 timer.js: ^1.0.4

+56 -57

src/Applications/UI/Alfred/View.elm

reviewed

··· 3 3 import Alfred exposing (..) 4 4 import Chunky exposing (..) 5 5 import Color exposing (Color) 6 6 - import Css.Classes as C 7 6 import Html exposing (Html, text) 8 7 import Html.Attributes exposing (autofocus, id, placeholder, style, type_) 9 8 import Html.Events exposing (onInput) ··· 28 27 case maybeInstance of 29 28 Just instance -> 30 29 chunk 31 31 - [ C.inset_0 32 32 - , C.flex 33 33 - , C.flex_col 34 34 - , C.fixed 35 35 - , C.items_center 36 36 - , C.px_3 37 37 - , C.cursor_pointer 38 38 - , C.z_50 30 30 + [ "inset-0" 31 31 + , "flex" 32 32 + , "flex-col" 33 33 + , "fixed" 34 34 + , "items-center" 35 35 + , "px-3" 36 36 + , "cursor-pointer" 37 37 + , "z-50" 39 38 ] 40 39 [ ----------------------------------------- 41 40 -- Message 42 41 ----------------------------------------- 43 42 chunk 44 44 - [ C.italic 45 45 - , C.leading_normal 46 46 - , C.mt_12 47 47 - , C.text_center 48 48 - , C.text_white 43 43 + [ "italic" 44 44 + , "leading-normal" 45 45 + , "mt-12" 46 46 + , "text-center" 47 47 + , "text-white" 49 48 50 49 -- Dark mode 51 50 ------------ 52 52 - , C.dark__text_base07 51 51 + , "dark:text-base07" 53 52 ] 54 53 [ text instance.message ] 55 54 ··· 66 65 } 67 66 ) 68 67 ] 69 69 - [ C.text_sm 70 70 - , C.max_w_lg 71 71 - , C.mt_8 72 72 - , C.w_full 68 68 + [ "text-sm" 69 69 + , "max-w-lg" 70 70 + , "mt-8" 71 71 + , "w-full" 73 72 ] 74 73 [ slab 75 74 Html.input ··· 89 88 Mutation -> 90 89 placeholder "Type to create" 91 90 ] 92 92 - [ C.border_none 93 93 - , C.bg_white 94 94 - , C.block 95 95 - , C.leading_normal 96 96 - , C.rounded 97 97 - , C.outline_none 98 98 - , C.p_4 99 99 - , C.shadow_md 100 100 - , C.text_2xl 101 101 - , C.tracking_tad_closer 102 102 - , C.w_full 91 91 + [ "border-none" 92 92 + , "bg-white" 93 93 + , "block" 94 94 + , "leading-normal" 95 95 + , "rounded" 96 96 + , "outline-none" 97 97 + , "p-4" 98 98 + , "shadow-md" 99 99 + , "text-2xl" 100 100 + , "tracking-tad-closer" 101 101 + , "w-full" 103 102 104 103 -- Dark mode 105 104 ------------ 106 106 - , C.dark__bg_base00 105 105 + , "dark:bg-base00" 107 106 ] 108 107 [] 109 108 ] ··· 113 112 ----------------------------------------- 114 113 , brick 115 114 [ id "alfred__results" ] 116 116 - [ C.bg_white 117 117 - , C.rounded 118 118 - , C.leading_none 119 119 - , C.max_w_lg 120 120 - , C.mb_32 121 121 - , C.mt_8 122 122 - , C.overflow_x_hidden 123 123 - , C.overflow_y_auto 124 124 - , C.shadow_md 125 125 - , C.smooth_scrolling 126 126 - , C.text_nearly_sm 127 127 - , C.w_full 115 115 + [ "bg-white" 116 116 + , "rounded" 117 117 + , "leading-none" 118 118 + , "max-w-lg" 119 119 + , "mb-32" 120 120 + , "mt-8" 121 121 + , "overflow-x-hidden" 122 122 + , "overflow-y-auto" 123 123 + , "shadow-md" 124 124 + , "smooth-scrolling" 125 125 + , "text-nearly-sm" 126 126 + , "w-full" 128 127 129 128 -- Dark mode 130 129 ------------ 131 131 - , C.dark__bg_base00 130 130 + , "dark:bg-base00" 132 131 ] 133 132 (List.indexedMap 134 133 (\idx result -> ··· 150 149 style "" "" 151 150 ] 152 151 (List.concat 153 153 - [ [ C.p_4 154 154 - , C.relative 155 155 - , C.truncate 152 152 + [ [ "p-4" 153 153 + , "relative" 154 154 + , "truncate" 156 155 ] 157 156 158 157 -- 159 158 , if idx == instance.focus then 160 160 - [ C.text_white, C.dark__text_base07 ] 159 159 + [ "text-white", "dark:text-base07" ] 161 160 162 161 else 163 163 - [ C.text_inherit ] 162 162 + [ "text-inherit" ] 164 163 165 164 -- 166 165 , if modBy 2 idx == 0 then 167 166 [] 168 167 169 168 else 170 170 - [ C.bg_gray_100, C.dark__bg_base01_15 ] 169 169 + [ "bg-gray-100", "dark:bg-base01-15" ] 171 170 ] 172 171 ) 173 172 [ text result ··· 175 174 -- 176 175 , if idx == instance.focus then 177 176 chunk 178 178 - [ C.absolute 179 179 - , C.leading_0 180 180 - , C.neg_translate_y_1over2 181 181 - , C.mr_3 182 182 - , C.right_0 183 183 - , C.top_1over2 184 184 - , C.transform 177 177 + [ "absolute" 178 178 + , "leading-0" 179 179 + , "-translate-y-1/2" 180 180 + , "mr-3" 181 181 + , "right-0" 182 182 + , "top-1/2" 183 183 + , "transform" 185 184 ] 186 185 [ Icons.keyboard_return 13 Inherit 187 186 ]

+133 -134

src/Applications/UI/Authentication/View.elm

reviewed

··· 2 2 3 3 import Chunky exposing (..) 4 4 import Conditional exposing (..) 5 5 - import Css.Classes as C 6 5 import Html exposing (Html, a, button, text) 7 6 import Html.Attributes exposing (attribute, href, placeholder, src, style, target, title, value, width) 8 7 import Html.Events exposing (onClick, onSubmit) ··· 32 31 view_ : State -> Html Authentication.Msg 33 32 view_ state = 34 33 chunk 35 35 - [ C.flex 36 36 - , C.flex_col 37 37 - , C.h_full 38 38 - , C.items_center 34 34 + [ "flex" 35 35 + , "flex-col" 36 36 + , "h-full" 37 37 + , "items-center" 39 38 ] 40 39 [ brick 41 40 [ style "height" "42%" ] 42 42 - [ C.flex 43 43 - , C.items_center 44 44 - , C.pb_8 41 41 + [ "flex" 42 42 + , "items-center" 43 43 + , "pb-8" 45 44 46 45 -- 47 47 - , C.md__pb_0 46 46 + , "md:pb-0" 48 47 ] 49 48 [ -- Logo 50 49 ------- 51 50 chunk 52 52 - [ C.py_5, C.relative ] 51 51 + [ "py-5", "relative" ] 53 52 [ slab 54 53 Html.img 55 54 [ onClick CancelFlow ··· 66 65 ] 67 66 [ case state of 68 67 Welcome -> 69 69 - C.cursor_default 68 68 + "cursor-default" 70 69 71 70 _ -> 72 72 - C.cursor_pointer 71 71 + "cursor-pointer" 73 72 ] 74 73 [] 75 74 ··· 94 93 [ text "I need a passphrase to encrypt your personal data." 95 94 , lineBreak 96 95 , inline 97 97 - [ C.font_normal, C.text_white_60 ] 96 96 + [ "font-normal", "text-white-60" ] 98 97 [ text "This'll prevent other people from reading your data." ] 99 98 ] 100 99 |> chunk [] ··· 104 103 [ text "I need a new passphrase to encrypt your personal data." 105 104 , lineBreak 106 105 , inline 107 107 - [ C.font_normal, C.text_white_60 ] 106 106 + [ "font-normal", "text-white-60" ] 108 107 [ text "This'll prevent other people from reading your data." ] 109 108 ] 110 109 |> chunk [] ··· 112 111 113 112 Welcome -> 114 113 [ text "Diffuse plays music" 115 115 - , inline [ C.not_italic, C.font_normal, C.mr_px ] [ text " ♫ " ] 116 116 - , inline [ C.font_normal, C.text_white_60 ] 114 114 + , inline [ "not-italic", "font-normal", "mr-px" ] [ text " ♫ " ] 115 115 + , inline [ "font-normal", "text-white-60" ] 117 116 [ text "from your Dropbox," 118 117 , lineBreak 119 118 , text "IPFS node, Amazon S3 bucket, or any other" ··· 128 127 [ text "Where would you like to keep your personal data?" 129 128 , lineBreak 130 129 , inline 131 131 - [ C.font_normal, C.text_white_60 ] 130 130 + [ "font-normal", "text-white-60" ] 132 131 [ text "That's things like your favourites, your playlists, etc." 133 132 , lineBreak 134 133 , text "After this you'll be able add some music ♫" ··· 171 170 -- Link to about page 172 171 ----------------------------------------- 173 172 , chunk 174 174 - [ C.antialiased 175 175 - , C.font_semibold 176 176 - , C.flex 177 177 - , C.flex_grow 178 178 - , C.items_end 179 179 - , C.leading_snug 180 180 - , C.pb_8 181 181 - , C.pt_3 182 182 - , C.text_sm 173 173 + [ "antialiased" 174 174 + , "font-semibold" 175 175 + , "flex" 176 176 + , "flex-grow" 177 177 + , "items-end" 178 178 + , "leading-snug" 179 179 + , "pb-8" 180 180 + , "pt-3" 181 181 + , "text-sm" 183 182 ] 184 183 [ slab 185 184 a 186 185 [ href "about/" ] 187 187 - [ C.border_b 188 188 - , C.border_white_60 189 189 - , C.italic 190 190 - , C.no_underline 191 191 - , C.text_white_60 186 186 + [ "border-b" 187 187 + , "border-white-60" 188 188 + , "italic" 189 189 + , "no-underline" 190 190 + , "text-white-60" 192 191 ] 193 192 [ text "More info" ] 194 193 ] ··· 202 201 welcomeScreen : Html Authentication.Msg 203 202 welcomeScreen = 204 203 chunk 205 205 - [ C.mt_3 206 206 - , C.relative 207 207 - , C.z_10 204 204 + [ "mt-3" 205 205 + , "relative" 206 206 + , "z-10" 208 207 ] 209 208 [ UI.Kit.buttonWithColor 210 209 UI.Kit.Blank ··· 214 213 Html.span 215 214 [ style "letter-spacing" "0.25em" 216 215 ] 217 217 - [ C.align_middle 218 218 - , C.inline_block 219 219 - , C.pt_px 220 220 - , C.text_nearly_sm 216 216 + [ "align-middle" 217 217 + , "inline-block" 218 218 + , "pt-px" 219 219 + , "text-nearly-sm" 221 220 ] 222 221 [ text "SIGN IN" ] 223 222 ) ··· 231 230 choicesScreen : Html Authentication.Msg 232 231 choicesScreen = 233 232 chunk 234 234 - [ C.bg_white 235 235 - , C.rounded 236 236 - , C.px_4 237 237 - , C.py_2 238 238 - , C.relative 239 239 - , C.z_10 233 233 + [ "bg-white" 234 234 + , "rounded" 235 235 + , "px-4" 236 236 + , "py-2" 237 237 + , "relative" 238 238 + , "z-10" 240 239 241 240 -- Dark mode 242 241 ------------ 243 243 - , C.dark__bg_darkest_hour 242 242 + , "dark:bg-darkest-hour" 244 243 ] 245 244 [ choiceButton 246 245 { action = ShowNewEncryptionKeyScreen Local ··· 286 285 -- More options 287 286 --------------- 288 287 , chunk 289 289 - [ C.pb_px, C.pt_4, C.text_center ] 288 288 + [ "pb-px", "pt-4", "text-center" ] 290 289 [ slab 291 290 Html.span 292 291 [ title "More options" 293 292 , Mouse.onClick ShowMoreOptions 294 293 ] 295 295 - [ C.inline_block, C.px_1, C.cursor_pointer, C.leading_none ] 294 294 + [ "inline-block", "px-1", "cursor-pointer", "leading-none" ] 296 295 [ chunk 297 297 - [ C.pointer_events_none ] 296 296 + [ "pointer-events-none" ] 298 297 [ Icons.more_horiz 22 Inherit ] 299 298 ] 300 299 ] ··· 311 310 -> Html msg 312 311 choiceButton { action, icon, infoLink, label, outOfOrder } = 313 312 chunk 314 314 - [ C.border_b 315 315 - , C.border_gray_300 316 316 - , C.relative 313 313 + [ "border-b" 314 314 + , "border-gray-300" 315 315 + , "relative" 317 316 318 317 -- 319 319 - , C.last__border_b_0 318 318 + , "last:border-b-0" 320 319 321 320 -- Dark mode 322 321 ------------ 323 323 - , C.dark__border_base01 322 322 + , "dark:border-base01" 324 323 ] 325 324 [ ----------------------------------------- 326 325 -- Button ··· 328 327 slab 329 328 button 330 329 [ onClick action ] 331 331 - [ C.bg_transparent 332 332 - , C.cursor_pointer 333 333 - , C.flex 334 334 - , C.items_center 335 335 - , C.leading_none 336 336 - , C.min_w_tiny 337 337 - , C.outline_none 338 338 - , C.px_2 339 339 - , C.py_4 340 340 - , C.text_left 341 341 - , C.text_sm 330 330 + [ "bg-transparent" 331 331 + , "cursor-pointer" 332 332 + , "flex" 333 333 + , "items-center" 334 334 + , "leading-none" 335 335 + , "min-w-tiny" 336 336 + , "outline-none" 337 337 + , "px-2" 338 338 + , "py-4" 339 339 + , "text-left" 340 340 + , "text-sm" 342 341 ] 343 342 [ chunk 344 344 - [ C.flex 345 345 - , C.items_center 343 343 + [ "flex" 344 344 + , "items-center" 346 345 347 346 -- 348 348 - , ifThenElse outOfOrder C.opacity_20 C.opacity_100 347 347 + , ifThenElse outOfOrder "opacity-20" "opacity-100" 349 348 ] 350 349 [ inline 351 351 - [ C.inline_flex, C.mr_4 ] 350 350 + [ "inline-flex", "mr-4" ] 352 351 [ icon 16 Inherit ] 353 352 , text label 354 353 ] ··· 370 369 , target "_blank" 371 370 , title ("Learn more about " ++ label) 372 371 ] 373 373 - [ C.absolute 374 374 - , C.cursor_pointer 375 375 - , C.duration_100 376 376 - , C.leading_none 377 377 - , C.ml_4 378 378 - , C.neg_translate_y_1over2 379 379 - , C.opacity_40 380 380 - , C.pl_4 381 381 - , C.text_white 382 382 - , C.transition 383 383 - , C.transform 372 372 + [ "absolute" 373 373 + , "cursor-pointer" 374 374 + , "duration-100" 375 375 + , "leading-none" 376 376 + , "ml-4" 377 377 + , "opacity-40" 378 378 + , "pl-4" 379 379 + , "text-white" 380 380 + , "transition-opacity" 381 381 + , "transform" 382 382 + , "-translate-y-1/2" 384 383 385 384 -- 386 386 - , C.hocus__opacity_100 385 385 + , "hocus:opacity-100" 387 386 ] 388 387 [ Icons.help 17 Inherit ] 389 388 ··· 401 400 slab 402 401 Html.form 403 402 [ onSubmit withEncryption ] 404 404 - [ C.flex 405 405 - , C.flex_col 406 406 - , C.max_w_xs 407 407 - , C.px_3 408 408 - , C.w_screen 403 403 + [ "flex" 404 404 + , "flex-col" 405 405 + , "max-w-xs" 406 406 + , "px-3" 407 407 + , "w-screen" 409 408 410 409 -- 411 411 - , C.sm__px_0 410 410 + , "sm:px-0" 412 411 ] 413 412 [ UI.Kit.textArea 414 413 [ attribute "autocapitalize" "none" ··· 432 431 (text "Continue") 433 432 , brick 434 433 [ onClickStopPropagation withoutEncryption ] 435 435 - [ C.cursor_pointer 436 436 - , C.flex 437 437 - , C.items_center 438 438 - , C.justify_center 439 439 - , C.leading_snug 440 440 - , C.mt_3 441 441 - , C.opacity_50 442 442 - , C.text_white 443 443 - , C.text_xs 434 434 + [ "cursor-pointer" 435 435 + , "flex" 436 436 + , "items-center" 437 437 + , "justify-center" 438 438 + , "leading-snug" 439 439 + , "mt-3" 440 440 + , "opacity-50" 441 441 + , "text-white" 442 442 + , "text-xs" 444 443 ] 445 445 - [ inline [ C.inline_block, C.leading_none, C.mr_2 ] [ Icons.warning 13 Inherit ] 444 444 + [ inline [ "inline-block", "leading-none", "mr-2" ] [ Icons.warning 13 Inherit ] 446 445 , text "Continue without encryption" 447 446 ] 448 447 ] ··· 457 456 slab 458 457 Html.form 459 458 [ onSubmit ConfirmInput ] 460 460 - [ C.flex 461 461 - , C.flex_col 462 462 - , C.max_w_xs 463 463 - , C.px_3 464 464 - , C.w_screen 459 459 + [ "flex" 460 460 + , "flex-col" 461 461 + , "max-w-xs" 462 462 + , "px-3" 463 463 + , "w-screen" 465 464 466 465 -- 467 467 - , C.sm__px_0 466 466 + , "sm:px-0" 468 467 ] 469 468 [ UI.Kit.textFieldAlt 470 469 [ attribute "autocapitalize" "off" ··· 486 485 speechBubble : Html msg -> Html msg 487 486 speechBubble contents = 488 487 chunk 489 489 - [ C.absolute 490 490 - , C.antialiased 491 491 - , C.bg_background 492 492 - , C.border_b 493 493 - , C.border_transparent 494 494 - , C.font_semibold 495 495 - , C.italic 496 496 - , C.leading_snug 497 497 - , C.left_1over2 498 498 - , C.max_w_screen 499 499 - , C.neg_translate_x_1over2 500 500 - , C.px_4 501 501 - , C.py_2 502 502 - , C.rounded 503 503 - , C.text_center 504 504 - , C.text_sm 505 505 - , C.text_white 506 506 - , C.top_full 507 507 - , C.transform 508 508 - , C.whitespace_no_wrap 488 488 + [ "absolute" 489 489 + , "antialiased" 490 490 + , "bg-background" 491 491 + , "border-b" 492 492 + , "border-transparent" 493 493 + , "font-semibold" 494 494 + , "italic" 495 495 + , "leading-snug" 496 496 + , "left-1/2" 497 497 + , "max-w-screen" 498 498 + , "-translate-x-1/2" 499 499 + , "px-4" 500 500 + , "py-2" 501 501 + , "rounded" 502 502 + , "text-center" 503 503 + , "text-sm" 504 504 + , "text-white" 505 505 + , "top-full" 506 506 + , "transform" 507 507 + , "whitespace-nowrap" 509 508 510 509 -- Dark mode 511 510 ------------ 512 512 - , C.dark__bg_darkest_hour 513 513 - , C.dark__text_gray_600 511 511 + , "dark:bg-darkest-hour" 512 512 + , "dark:text-gray-600" 514 513 ] 515 514 [ contents 516 515 517 516 -- 518 517 , brick 519 518 speechBubbleArrowStyles 520 520 - [ C.absolute 521 521 - , C.border_background 522 522 - , C.h_0 523 523 - , C.left_1over2 524 524 - , C.neg_translate_x_1over2 525 525 - , C.neg_translate_y_full 526 526 - , C.top_0 527 527 - , C.transform 528 528 - , C.w_0 519 519 + [ "absolute" 520 520 + , "border-background" 521 521 + , "h-0" 522 522 + , "left-1/2" 523 523 + , "-translate-x-1/2" 524 524 + , "-translate-y-full" 525 525 + , "top-0" 526 526 + , "transform" 527 527 + , "w-0" 529 528 530 529 -- Dark mode 531 530 ------------ 532 532 - , C.dark__border_darkest_hour 531 531 + , "dark:border-darkest-hour" 533 532 ] 534 533 [] 535 534 ]

+24 -25

src/Applications/UI/Backdrop.elm

reviewed

··· 2 2 3 3 import Chunky exposing (..) 4 4 import Color 5 5 - import Css.Classes as C 6 5 import Html exposing (Html) 7 6 import Html.Attributes exposing (src, style) 8 7 import Html.Events exposing (on) ··· 91 90 view : Model -> Html Msg 92 91 view model = 93 92 chunk 94 94 - [ C.fixed 95 95 - , C.neg_inset_px 96 96 - , C.z_0 93 93 + [ "fixed" 94 94 + , "-inset-px" 95 95 + , "z-0" 97 96 ] 98 97 [ Lazy.lazy chosen model.chosenBackdrop 99 98 , Lazy.lazy2 loaded model.loadedBackdrops model.fadeInBackdrop ··· 102 101 --------- 103 102 , brick 104 103 [ style "background" "linear-gradient(#0000, rgba(0, 0, 0, 0.175))" ] 105 105 - [ C.absolute 106 106 - , C.bottom_0 107 107 - , C.h_64 108 108 - , C.inset_x_0 109 109 - , C.z_10 104 104 + [ "absolute" 105 105 + , "bottom-0" 106 106 + , "h-64" 107 107 + , "inset-x-0" 108 108 + , "z-10" 110 109 ] 111 110 [] 112 111 ] ··· 185 184 , src ("images/Background/" ++ c) 186 185 , style "opacity" "0.00001" 187 186 ] 188 188 - [ C.fixed 189 189 - , C.h_px 190 190 - , C.left_full 191 191 - , C.overflow_hidden 192 192 - , C.top_full 193 193 - , C.w_px 187 187 + [ "fixed" 188 188 + , "h-px" 189 189 + , "left-full" 190 190 + , "overflow-hidden" 191 191 + , "top-full" 192 192 + , "w-px" 194 193 ] 195 194 [] 196 195 ··· 216 215 image fadeIn isPrevious loadedBackdrop = 217 216 let 218 217 defaultClasses = 219 219 - [ C.bg_cover 220 220 - , C.fixed 221 221 - , C.inset_0 218 218 + [ "bg-cover" 219 219 + , "fixed" 220 220 + , "inset-0" 222 221 223 222 -- Opacity 224 223 ---------- 225 224 , if isPrevious || not fadeIn then 226 226 - C.opacity_100 225 225 + "opacity-100" 227 226 228 227 else 229 229 - C.opacity_0 228 228 + "opacity-0" 230 229 ] 231 230 232 231 animationClasses = 233 232 if not isPrevious && fadeIn then 234 234 - [ C.animation_2s 235 235 - , C.animation_delay_50ms 236 236 - , C.animation_fadeIn 237 237 - , C.animation_fill_forwards 238 238 - , C.animation_once 233 233 + [ "animation-2s" 234 234 + , "animation-delay-50ms" 235 235 + , "animation-fadeIn" 236 236 + , "animation-fill-forwards" 237 237 + , "animation-once" 239 238 ] 240 239 241 240 else

+43 -41

src/Applications/UI/Console.elm

reviewed

··· 2 2 3 3 import Chunky exposing (..) 4 4 import Conditional exposing (..) 5 5 - import Css.Classes as C 6 5 import Html exposing (Html, text) 7 7 - import Html.Attributes exposing (class, style, title) 6 6 + import Html.Attributes exposing (style, title) 8 7 import Html.Events exposing (on, onClick) 9 8 import Json.Decode as Decode 10 9 import Material.Icons as Icons ··· 28 27 -> Html Msg 29 28 view activeQueueItem repeat shuffle { stalled, loading, playing } ( position, duration ) = 30 29 chunk 31 31 - [ C.antialiased 32 32 - , C.mt_1 33 33 - , C.text_center 34 34 - , C.w_full 30 30 + [ "antialiased" 31 31 + , "mt-1" 32 32 + , "text-center" 33 33 + , "w-full" 35 34 36 35 -- 37 37 - , C.lg__max_w_insulation 36 36 + , "lg:max-w-insulation" 38 37 ] 39 38 [ ----------------------------------------- 40 39 -- Now Playing 41 40 ----------------------------------------- 42 41 chunk 43 43 - [ C.text_sm 44 44 - , C.italic 45 45 - , C.leading_normal 46 46 - , C.py_4 47 47 - , C.text_white 42 42 + [ "text-sm" 43 43 + , "italic" 44 44 + , "leading-normal" 45 45 + , "py-4" 46 46 + , "text-white" 48 47 ] 49 48 [ if stalled then 50 49 text "Audio connection got interrupted, trying to reconnect ..." ··· 55 54 else 56 55 case Maybe.map .identifiedTrack activeQueueItem of 57 56 Just ( _, { tags } ) -> 58 58 - Html.span 57 57 + slab 58 58 + Html.span 59 59 [ onClick (TracksMsg Tracks.ScrollToNowPlaying) 60 60 , title "Scroll to track" 61 61 - , C.cursor_pointer 62 61 ] 62 62 + [ "cursor-pointer" ] 63 63 [ text (tags.artist ++ " - " ++ tags.title) ] 64 64 65 65 Nothing -> ··· 82 82 in 83 83 brick 84 84 [ on "click" (clickLocationDecoder Seek) ] 85 85 - [ C.cursor_pointer 86 86 - , C.py_1 85 85 + [ "cursor-pointer" 86 86 + , "py-1" 87 87 ] 88 88 [ brick 89 89 [ style "background-color" "rgba(255, 255, 255, 0.25)" 90 90 , style "height" "3px" 91 91 ] 92 92 - [ C.rounded_sm 93 93 - , C.select_none 92 92 + [ "rounded-sm" 93 93 + , "select-none" 94 94 ] 95 95 [ brick 96 96 [ style "background-color" "rgba(255, 255, 255, 0.325)" 97 97 , style "height" "3px" 98 98 , style "width" (String.fromFloat progress ++ "%") 99 99 ] 100 100 - [ class "progressBarValue", C.rounded_sm ] 100 100 + [ "progressBarValue" 101 101 + , "rounded-sm" 102 102 + ] 101 103 [] 102 104 ] 103 105 ] ··· 106 108 -- Buttons 107 109 ----------------------------------------- 108 110 , chunk 109 109 - [ C.flex 110 110 - , C.justify_between 111 111 - , C.mb_3 112 112 - , C.mt_4 113 113 - , C.select_none 114 114 - , C.text_white_90 111 111 + [ "flex" 112 112 + , "justify-between" 113 113 + , "mb-3" 114 114 + , "mt-4" 115 115 + , "select-none" 116 116 + , "text-white-90" 115 117 116 118 -- 117 117 - , C.sm__justify_center 119 119 + , "sm:justify-center" 118 120 ] 119 121 [ button "Toggle repeat" 120 122 (smallLight repeat) ··· 158 160 [ onClick msg 159 161 , title t 160 162 ] 161 161 - [ C.cursor_pointer 162 162 - , C.flex 163 163 - , C.flex_col 164 164 - , C.items_center 165 165 - , C.px_1 163 163 + [ "cursor-pointer" 164 164 + , "flex" 165 165 + , "flex-col" 166 166 + , "items-center" 167 167 + , "px-1" 166 168 167 169 -- 168 168 - , C.sm__mx_8 170 170 + , "sm:mx-8" 169 171 ] 170 172 [ brick 171 173 [ style "height" "4px" ] ··· 173 175 [ light ] 174 176 , brick 175 177 [ style "height" "25px" ] 176 176 - [ C.flex 177 177 - , C.items_center 178 178 - , C.my_2 178 178 + [ "flex" 179 179 + , "items-center" 180 180 + , "my-2" 179 181 ] 180 182 [ content ] 181 183 ] ··· 194 196 "rgb(157, 174, 255)" 195 197 "rgba(255, 255, 255, 0.25)" 196 198 ] 197 197 - [ C.rounded_full ] 199 199 + [ "rounded-full" ] 198 200 [] 199 201 200 202 ··· 212 214 "rgb(198, 254, 153)" 213 215 "rgba(255, 255, 255, 0.25)" 214 216 ] 215 215 - [ C.relative, C.rounded_full ] 217 217 + [ "relative", "rounded-full" ] 216 218 [] 217 219 218 220 ··· 229 231 [ style "font-size" "11.25px" 230 232 , style "letter-spacing" "3.75px" 231 233 ] 232 232 - [ C.font_bold 233 233 - , C.font_display 234 234 - , C.relative 235 235 - , C.whitespace_no_wrap 234 234 + [ "font-bold" 235 235 + , "font-display" 236 236 + , "relative" 237 237 + , "whitespace-nowrap" 236 238 ] 237 239 [ text "PLAY" ] 238 240

+37 -38

src/Applications/UI/ContextMenu.elm

reviewed

··· 3 3 import Chunky exposing (..) 4 4 import Conditional exposing (..) 5 5 import ContextMenu exposing (..) 6 6 - import Css.Classes as C 7 6 import Html exposing (Html, text) 8 7 import Html.Attributes exposing (style) 9 8 import Html.Events exposing (custom) ··· 40 39 -- 41 40 , style "min-width" "170px" 42 41 ] 43 43 - [ C.absolute 44 44 - , C.bg_white 45 45 - , C.leading_loose 46 46 - , C.overflow_hidden 47 47 - , C.neg_translate_x_1over2 48 48 - , C.neg_translate_y_1over2 49 49 - , C.rounded 50 50 - , C.shadow_md 51 51 - , C.select_none 52 52 - , C.text_almost_sm 53 53 - , C.transform 54 54 - , C.z_50 42 42 + [ "absolute" 43 43 + , "bg-white" 44 44 + , "leading-loose" 45 45 + , "overflow-hidden" 46 46 + , "-translate-x-1/2" 47 47 + , "-translate-y-1/2" 48 48 + , "rounded" 49 49 + , "shadow-md" 50 50 + , "select-none" 51 51 + , "text-almost-sm" 52 52 + , "transform" 53 53 + , "z-50" 55 54 56 55 -- Dark mode 57 56 ------------ 58 58 - , C.dark__bg_darkest_hour 57 57 + , "dark:bg-darkest-hour" 59 58 ] 60 59 (List.map 61 60 (\item -> ··· 86 85 } 87 86 ) 88 87 ] 89 89 - [ C.border_b 90 90 - , C.cursor_pointer 91 91 - , C.pl_4 92 92 - , C.pr_8 93 93 - , C.py_3 94 94 - , C.truncate 88 88 + [ "border-b" 89 89 + , "cursor-pointer" 90 90 + , "pl-4" 91 91 + , "pr-8" 92 92 + , "py-3" 93 93 + , "truncate" 95 94 96 95 -- 97 97 - , C.last__border_transparent 96 96 + , "last:border-transparent" 98 97 99 98 -- 100 100 - , ifThenElse active C.antialiased C.subpixel_antialiased 101 101 - , ifThenElse active C.border_transparent C.border_gray_200 102 102 - , ifThenElse active C.bg_base00 C.bg_transparent 103 103 - , ifThenElse active C.text_white C.text_inherit 104 104 - , ifThenElse active C.font_semibold C.font_normal 99 99 + , ifThenElse active "antialiased" "subpixel-antialiased" 100 100 + , ifThenElse active "border-transparent" "border-gray-200" 101 101 + , ifThenElse active "bg-base00" "bg-transparent" 102 102 + , ifThenElse active "text-white" "text-inherit" 103 103 + , ifThenElse active "font-semibold" "font-normal" 105 104 106 105 -- Dark mode 107 106 ------------ 108 108 - , C.dark__border_base00 107 107 + , "dark:border-base00" 109 108 110 109 -- 111 111 - , ifThenElse active C.dark__bg_base07 C.dark__bg_transparent 112 112 - , ifThenElse active C.dark__text_darkest_hour C.dark__text_inherit 110 110 + , ifThenElse active "dark:bg-base07" "dark:bg-transparent" 111 111 + , ifThenElse active "dark:text-darkest-hour" "dark:text-inherit" 113 112 ] 114 113 [ inline 115 115 - [ C.align_middle 116 116 - , C.inline_block 117 117 - , C.leading_0 114 114 + [ "align-middle" 115 115 + , "inline-block" 116 116 + , "leading-0" 118 117 ] 119 118 [ icon 14 Inherit ] 120 119 , inline 121 121 - [ C.align_middle 122 122 - , C.inline_block 123 123 - , C.leading_0 124 124 - , C.ml_2 125 125 - , C.pl_1 126 126 - , C.relative 120 120 + [ "align-middle" 121 121 + , "inline-block" 122 122 + , "leading-0" 123 123 + , "ml-2" 124 124 + , "pl-1" 125 125 + , "relative" 127 126 ] 128 127 [ text label ] 129 128 ]

+69 -60

src/Applications/UI/Equalizer/View.elm

reviewed

··· 1 1 module UI.Equalizer.View exposing (view) 2 2 3 3 + import Chunky exposing (..) 3 4 import Common 4 4 - import Css.Classes as C 5 5 import Equalizer exposing (..) 6 6 import Html exposing (Html) 7 7 import Html.Attributes as A ··· 38 38 ----------------------------------------- 39 39 -- Content 40 40 ----------------------------------------- 41 41 - , Html.div 42 42 - [ C.relative, C.select_none ] 43 43 - [ Html.div 44 44 - [ C.absolute, C.left_0, C.top_0 ] 41 41 + , chunk 42 42 + [ "relative", "select-none" ] 43 43 + [ chunk 44 44 + [ "absolute", "left-0", "top-0" ] 45 45 [ UI.Kit.canister [ UI.Kit.h1 "Equalizer" ] 46 46 ] 47 47 ] ··· 54 54 55 55 eqView : Settings -> Html Msg 56 56 eqView settings = 57 57 - Html.div 58 58 - [ A.class "equalizer" 59 59 - , C.text_center 57 57 + chunk 58 58 + [ "equalizer" 59 59 + 60 60 + -- 61 61 + , "text-center" 60 62 ] 61 61 - [ Html.div 62 62 - [ C.border 63 63 - , C.border_black_05 64 64 - , C.rounded 65 65 - , C.flex 63 63 + [ chunk 64 64 + [ "border" 65 65 + , "border-black-05" 66 66 + , "rounded" 67 67 + , "flex" 66 68 67 69 -- Dark mode 68 70 ------------ 69 69 - , C.dark__border_base00 71 71 + , "dark:border-base00" 70 72 ] 71 73 [ knob Volume settings.volume 72 74 ] 73 75 74 76 -- 75 75 - , Html.div 76 76 - [ C.border 77 77 - , C.border_black_05 78 78 - , C.rounded 79 79 - , C.flex 80 80 - , C.mt_4 77 77 + , chunk 78 78 + [ "border" 79 79 + , "border-black-05" 80 80 + , "rounded" 81 81 + , "flex" 82 82 + , "mt-4" 81 83 82 84 -- Dark mode 83 85 ------------ 84 84 - , C.dark__border_base00 86 86 + , "dark:border-base00" 85 87 ] 86 88 [ knob Low settings.low 87 89 , knob Mid settings.mid ··· 96 98 97 99 knob : Knob -> Float -> Html Msg 98 100 knob knobType value = 99 99 - Html.div 100 100 - [ C.border_black_05 101 101 - , C.border_r 102 102 - , C.flex_grow 103 103 - , C.flex_shrink_0 104 104 - , C.px_10 105 105 - , C.py_4 101 101 + chunk 102 102 + [ "border-black-05" 103 103 + , "border-r" 104 104 + , "flex-grow" 105 105 + , "flex-shrink-0" 106 106 + , "px-10" 107 107 + , "py-4" 106 108 107 109 -- 108 108 - , C.last__border_r_0 110 110 + , "last:border-r-0" 109 111 110 112 -- 111 111 - , C.sm__px_12 112 112 - , C.md__px_16 113 113 + , "sm:px-12" 114 114 + , "md:px-16" 113 115 ] 114 116 [ knob_ knobType value 115 117 , knobLines ··· 135 137 , preventDefault = True 136 138 } 137 139 in 138 138 - Html.div 139 139 - [ A.class "knob" 140 140 - , A.style "transform" ("rotate(" ++ String.fromFloat angle ++ "deg)") 140 140 + brick 141 141 + [ A.style "transform" ("rotate(" ++ String.fromFloat angle ++ "deg)") 141 142 142 143 -- 143 144 , Html.Events.custom "dblclick" resetDecoder ··· 147 148 , knobType 148 149 |> ActivateKnob 149 150 |> Pointer.onDown 151 151 + ] 152 152 + [ "knob" 150 153 151 154 -- 152 152 - , C.cursor_pointer 153 153 - , C.mx_auto 154 154 - , C.overflow_hidden 155 155 - , C.relative 156 156 - , C.rounded_full 155 155 + , "cursor-pointer" 156 156 + , "mx-auto" 157 157 + , "overflow-hidden" 158 158 + , "relative" 159 159 + , "rounded-full" 157 160 ] 158 161 [ Html.map never knob__ ] 159 162 ··· 163 166 Html.div 164 167 [] 165 168 [ decagonSvg 166 166 - , Html.div 167 167 - [ A.class "layer-a" 168 168 - , C.absolute 169 169 - , C.inset_0 170 170 - , C.rounded_full 171 171 - , C.z_10 169 169 + , chunk 170 170 + [ "layer-a" 171 171 + 172 172 + -- 173 173 + , "absolute" 174 174 + , "inset-0" 175 175 + , "rounded-full" 176 176 + , "z-10" 172 177 ] 173 173 - [ Html.div 174 174 - [ A.class "layer-b" 175 175 - , C.mx_auto 178 178 + [ chunk 179 179 + [ "layer-b" 180 180 + 181 181 + -- 182 182 + , "mx-auto" 176 183 ] 177 184 [] 178 185 ] ··· 181 188 182 189 knobLabel : Knob -> Html Msg 183 190 knobLabel knobType = 184 184 - Html.div 185 185 - [ A.class "knob-label" 191 191 + chunk 192 192 + [ "knob-label" 186 193 187 194 -- 188 188 - , C.font_semibold 189 189 - , C.mt_3 190 190 - , C.opacity_70 191 191 - , C.tracking_wide 195 195 + , "font-semibold" 196 196 + , "mt-3" 197 197 + , "opacity-70" 198 198 + , "tracking-wide" 192 199 ] 193 200 [ case knobType of 194 201 Low -> ··· 207 214 208 215 knobLines : Html Msg 209 216 knobLines = 210 210 - Html.div 211 211 - [ A.class "knob-lines" 212 212 - , C.mx_auto 213 213 - , C.relative 217 217 + chunk 218 218 + [ "knob-lines" 219 219 + 220 220 + -- 221 221 + , "mx-auto" 222 222 + , "relative" 214 223 ] 215 215 - [ Html.div [ C.absolute, C.left_0, C.top_0 ] [] 216 216 - , Html.div [ C.absolute, C.right_0, C.top_0 ] [] 224 224 + [ chunk [ "absolute", "left-0", "top-0" ] [] 225 225 + , chunk [ "absolute", "right-0", "top-0" ] [] 217 226 ] 218 227 219 228

+229 -230

src/Applications/UI/Kit.elm

reviewed

··· 3 3 import Chunky exposing (..) 4 4 import Color 5 5 import Conditional exposing (ifThenElse) 6 6 - import Css.Classes as C 7 6 import Html exposing (Html) 8 7 import Html.Attributes as A exposing (href, style) 9 8 import Html.Events exposing (onClick, onInput) ··· 108 107 buttonWithOptions tag attributes buttonColor buttonType maybeMsg child = 109 108 let 110 109 defaultClasses = 111 111 - [ C.antialiased 112 112 - , C.border_2 113 113 - , C.cursor_pointer 114 114 - , C.font_bold 115 115 - , C.inline_block 116 116 - , C.leading_relaxed 117 117 - , C.no_underline 118 118 - , C.py_2 119 119 - , C.px_4 120 120 - , C.rounded 121 121 - , C.text_center 122 122 - , C.text_sm 110 110 + [ "antialiased" 111 111 + , "border-2" 112 112 + , "cursor-pointer" 113 113 + , "font-bold" 114 114 + , "inline-block" 115 115 + , "leading-relaxed" 116 116 + , "no-underline" 117 117 + , "py-2" 118 118 + , "px-4" 119 119 + , "rounded" 120 120 + , "text-center" 121 121 + , "text-sm" 123 122 124 123 -- 125 125 - , C.fixate__bg_white 126 126 - , C.fixate__border_black 127 127 - , C.fixate__text_black 124 124 + , "fixate:bg-white" 125 125 + , "fixate:border-black" 126 126 + , "fixate:text-black" 128 127 ] 129 128 130 129 specificClasses = ··· 132 131 Filled -> 133 132 case buttonColor of 134 133 Accent -> 135 135 - [ C.bg_accent_btn 136 136 - , C.border_transparent 137 137 - , C.text_white_90 134 134 + [ "bg-accent-btn" 135 135 + , "border-transparent" 136 136 + , "text-white-90" 138 137 ] 139 138 140 139 Blank -> 141 141 - [ C.bg_white 142 142 - , C.border_transparent 143 143 - , C.text_accent_light 140 140 + [ "bg-white" 141 141 + , "border-transparent" 142 142 + , "text-accent-light" 144 143 145 144 -- Dark mode 146 145 ------------ 147 147 - , C.dark__bg_darkest_hour 148 148 - , C.dark__text_accent_dark 146 146 + , "dark:bg-darkest-hour" 147 147 + , "dark:text-accent-dark" 149 148 ] 150 149 151 150 Gray -> 152 152 - [ C.bg_base04 153 153 - , C.border_transparent 154 154 - , C.text_white 151 151 + [ "bg-base04" 152 152 + , "border-transparent" 153 153 + , "text-white" 155 154 156 155 -- Dark mode 157 156 ------------ 158 158 - , C.dark__bg_base05 157 157 + , "dark:bg-base05" 159 158 ] 160 159 161 160 _ -> 162 161 case buttonColor of 163 162 Accent -> 164 164 - [ C.bg_transparent 165 165 - , C.border_base04 166 166 - , C.text_base04 163 163 + [ "bg-transparent" 164 164 + , "border-base04" 165 165 + , "text-base04" 167 166 ] 168 167 169 168 Blank -> 170 170 - [ C.bg_transparent 171 171 - , C.border_white 172 172 - , C.text_white 169 169 + [ "bg-transparent" 170 170 + , "border-white" 171 171 + , "text-white" 173 172 ] 174 173 175 174 Gray -> 176 176 - [ C.bg_transparent 177 177 - , C.border_base04 178 178 - , C.text_base04 175 175 + [ "bg-transparent" 176 176 + , "border-base04" 177 177 + , "text-base04" 179 178 180 179 -- Dark mode 181 180 ------------ 182 182 - , C.dark__border_base05 183 183 - , C.dark__text_base05 181 181 + , "dark:border-base05" 182 182 + , "dark:text-base05" 184 183 ] 185 184 in 186 185 slab ··· 199 198 [ case buttonType of 200 199 IconOnly -> 201 200 inline 202 202 - [ C.align_middle 203 203 - , C.inline_block 204 204 - , C.leading_none 205 205 - , C.pointer_events_none 206 206 - , C.text_0 201 201 + [ "align-middle" 202 202 + , "inline-block" 203 203 + , "leading-none" 204 204 + , "pointer-events-none" 205 205 + , "text-0" 207 206 ] 208 207 [ child ] 209 208 210 209 _ -> 211 210 inline 212 212 - [ C.align_middle 213 213 - , C.inline_block 214 214 - , C.leading_none 215 215 - , C.pointer_events_none 211 211 + [ "align-middle" 212 212 + , "inline-block" 213 213 + , "leading-none" 214 214 + , "pointer-events-none" 216 215 ] 217 216 [ child ] 218 217 ] ··· 225 224 canister : List (Html msg) -> Html msg 226 225 canister children = 227 226 chunk 228 228 - [ C.mx_1, C.px_4, C.pb_4 ] 227 227 + [ "mx-1", "px-4", "pb-4" ] 229 228 children 230 229 231 230 232 231 canisterForm : List (Html msg) -> Html msg 233 232 canisterForm children = 234 233 chunk 235 235 - [ C.mx_1, C.px_4, C.pb_4, C.w_full ] 234 234 + [ "mx-1", "px-4", "pb-4", "w-full" ] 236 235 children 237 236 238 237 239 238 centeredContent : List (Html msg) -> Html msg 240 239 centeredContent children = 241 240 chunk 242 242 - [ C.flex 243 243 - , C.flex_grow 244 244 - , C.overflow_hidden 245 245 - , C.relative 241 241 + [ "flex" 242 242 + , "flex-grow" 243 243 + , "overflow-hidden" 244 244 + , "relative" 246 245 ] 247 246 [ Html.map never logoBackdrop 248 247 , chunk 249 249 - [ C.flex 250 250 - , C.flex_col 251 251 - , C.flex_grow 252 252 - , C.items_center 253 253 - , C.justify_center 254 254 - , C.relative 255 255 - , C.z_10 248 248 + [ "flex" 249 249 + , "flex-col" 250 250 + , "flex-grow" 251 251 + , "items-center" 252 252 + , "justify-center" 253 253 + , "relative" 254 254 + , "z-10" 256 255 ] 257 256 children 258 257 ] ··· 264 263 [ onClick opts.toggleMsg 265 264 , style "left" "-3px" 266 265 ] 267 267 - [ C.inline_block, C.cursor_pointer, C.relative ] 266 266 + [ "inline-block", "cursor-pointer", "relative" ] 268 267 [ if opts.checked then 269 268 Icons.check_box 22 Inherit 270 269 ··· 278 277 slab 279 278 Html.h1 280 279 [ style "font-size" "13.5px" ] 281 281 - [ C.all_small_caps 282 282 - , C.antialiased 283 283 - , C.bg_base06 284 284 - , C.inline_block 285 285 - , C.font_semibold 286 286 - , C.leading_tight 287 287 - , C.m_0 288 288 - , C.neg_top_px 289 289 - , C.overflow_hidden 290 290 - , C.pointer_events_none 291 291 - , C.px_2 292 292 - , C.py_1 293 293 - , C.relative 294 294 - , C.rounded_b 295 295 - , C.uppercase 296 296 - , C.text_sm 297 297 - , C.text_white 280 280 + [ "all-small-caps" 281 281 + , "antialiased" 282 282 + , "bg-base06" 283 283 + , "inline-block" 284 284 + , "font-semibold" 285 285 + , "leading-tight" 286 286 + , "m-0" 287 287 + , "-top-px" 288 288 + , "overflow-hidden" 289 289 + , "pointer-events-none" 290 290 + , "px-2" 291 291 + , "py-1" 292 292 + , "relative" 293 293 + , "rounded-b" 294 294 + , "uppercase" 295 295 + , "text-sm" 296 296 + , "text-white" 298 297 299 298 -- Dark mode 300 299 ------------ 301 301 - , C.dark__bg_base01 302 302 - , C.dark__text_base05 300 300 + , "dark:bg-base01" 301 301 + , "dark:text-base05" 303 302 ] 304 303 [ Html.text text ] 305 304 ··· 309 308 slab 310 309 Html.h2 311 310 [] 312 312 - [ C.antialiased 313 313 - , C.font_bold 314 314 - , C.font_display 315 315 - , C.leading_tight 316 316 - , C.mb_8 317 317 - , C.mt_4 318 318 - , C.mx_auto 319 319 - , C.text_2xl 320 320 - , C.text_center 311 311 + [ "antialiased" 312 312 + , "font-bold" 313 313 + , "font-display" 314 314 + , "leading-tight" 315 315 + , "mb-8" 316 316 + , "mt-4" 317 317 + , "mx-auto" 318 318 + , "text-2xl" 319 319 + , "text-center" 321 320 ] 322 321 [ Html.text text ] 323 322 ··· 327 326 slab 328 327 Html.h2 329 328 [] 330 330 - [ C.antialiased 331 331 - , C.font_bold 332 332 - , C.font_display 333 333 - , C.leading_tight 334 334 - , C.mb_8 335 335 - , C.mt_4 336 336 - , C.text_xl 329 329 + [ "antialiased" 330 330 + , "font-bold" 331 331 + , "font-display" 332 332 + , "leading-tight" 333 333 + , "mb-8" 334 334 + , "mt-4" 335 335 + , "text-xl" 337 336 ] 338 337 [ Html.text text ] 339 338 ··· 341 340 inlineIcon : (Int -> Coloring -> Svg.Svg msg) -> Html msg 342 341 inlineIcon icon = 343 342 inline 344 344 - [ C.align_sub 345 345 - , C.inline_block 346 346 - , C.leading_0 347 347 - , C.mr_1 348 348 - , C.text_0 343 343 + [ "align-sub" 344 344 + , "inline-block" 345 345 + , "leading-0" 346 346 + , "mr-1" 347 347 + , "text-0" 349 348 ] 350 349 [ icon 14 Inherit ] 351 350 ··· 355 354 slab 356 355 Html.p 357 356 [ style "line-height" "1.75" ] 358 358 - [ C.mb_6 359 359 - , C.mt_3 360 360 - , C.text_base05 361 361 - , C.text_sm 357 357 + [ "mb-6" 358 358 + , "mt-3" 359 359 + , "text-base05" 360 360 + , "text-sm" 362 361 363 362 -- Dark mode 364 363 ------------ 365 365 - , C.dark__text_base03 364 364 + , "dark:text-base03" 366 365 ] 367 366 [ child ] 368 367 ··· 372 371 slab 373 372 Html.label 374 373 (style "font-size" "11.25px" :: attributes) 375 375 - [ C.antialiased 376 376 - , C.block 377 377 - , C.font_bold 378 378 - , C.leading_normal 379 379 - , C.opacity_90 380 380 - , C.uppercase 374 374 + [ "antialiased" 375 375 + , "block" 376 376 + , "font-bold" 377 377 + , "leading-normal" 378 378 + , "opacity-90" 379 379 + , "uppercase" 381 380 ] 382 381 [ Html.text t ] 383 382 ··· 389 388 [ A.href params.url 390 389 , A.target "_blank" 391 390 ] 392 392 - [ C.border_b_2 393 393 - , C.border_base04 394 394 - , C.inline_block 395 395 - , C.leading_none 396 396 - , C.no_underline 397 397 - , C.text_inherit 391 391 + [ "border-b-2" 392 392 + , "border-base04" 393 393 + , "inline-block" 394 394 + , "leading-none" 395 395 + , "no-underline" 396 396 + , "text-inherit" 398 397 ] 399 398 [ Html.text params.label ] 400 399 401 400 402 401 logoBackdrop : Html Never 403 402 logoBackdrop = 404 404 - Html.div 405 405 - [ A.class "logo-backdrop" 403 403 + chunk 404 404 + [ "logo-backdrop" 406 405 407 406 -- 408 408 - , C.absolute 409 409 - , C.bg_cover 410 410 - , C.bg_no_repeat 411 411 - , C.h_0 412 412 - , C.left_full 413 413 - , C.opacity_025 414 414 - , C.pt_full 415 415 - , C.top_0 416 416 - , C.z_0 407 407 + , "absolute" 408 408 + , "bg-cover" 409 409 + , "bg-no-repeat" 410 410 + , "h-0" 411 411 + , "left-full" 412 412 + , "opacity-025" 413 413 + , "pt-full" 414 414 + , "top-0" 415 415 + , "z-0" 417 416 418 417 -- Dark mode 419 418 ------------ 420 420 - , C.dark__opacity_40 419 419 + , "dark:opacity-40" 421 420 ] 422 421 [] 423 422 ··· 425 424 receptacle : { scrolling : Bool } -> List (Html msg) -> Html msg 426 425 receptacle { scrolling } = 427 426 chunk 428 428 - [ C.absolute 429 429 - , C.bg_white 430 430 - , C.flex 431 431 - , C.flex_col 432 432 - , C.inset_0 433 433 - , C.overflow_x_hidden 434 434 - , C.scrolling_touch 435 435 - , C.z_50 427 427 + [ "absolute" 428 428 + , "bg-white" 429 429 + , "flex" 430 430 + , "flex-col" 431 431 + , "inset-0" 432 432 + , "overflow-x-hidden" 433 433 + , "scrolling-touch" 434 434 + , "z-50" 436 435 437 436 -- Dark mode 438 437 ------------ 439 439 - , C.dark__bg_darkest_hour 438 438 + , "dark:bg-darkest-hour" 440 439 441 440 -- 442 442 - , ifThenElse scrolling C.overflow_y_auto C.overflow_y_hidden 441 441 + , ifThenElse scrolling "overflow-y-auto" "overflow-y-hidden" 443 442 ] 444 443 445 444 446 445 select : (String -> msg) -> List (Html msg) -> Html msg 447 446 select inputHandler options = 448 447 chunk 449 449 - [ C.max_w_md 450 450 - , C.mx_auto 451 451 - , C.relative 452 452 - , C.text_base05 453 453 - , C.w_full 448 448 + [ "max-w-md" 449 449 + , "mx-auto" 450 450 + , "relative" 451 451 + , "text-base05" 452 452 + , "w-full" 454 453 455 454 -- 456 456 - , C.focus_within__text_black 455 455 + , "focus-within:text-black" 457 456 458 457 -- Dark mode 459 458 ------------ 460 460 - , C.dark__text_gray_600 461 461 - , C.dark__focus_within__text_base07 459 459 + , "dark:text-gray-600" 460 460 + , "dark:focus-within:text-base07" 462 461 ] 463 462 [ slab 464 463 Html.select 465 464 [ onInput inputHandler ] 466 466 - [ C.appearance_none 467 467 - , C.border_b 468 468 - , C.border_l_0 469 469 - , C.border_r_0 470 470 - , C.border_t_0 471 471 - , C.border_gray_400 472 472 - , C.bg_transparent 473 473 - , C.block 474 474 - , C.leading_normal 475 475 - , C.m_0 476 476 - , C.outline_none 477 477 - , C.py_2 478 478 - , C.px_0 479 479 - , C.rounded_none 480 480 - , C.text_base01 481 481 - , C.text_lg 482 482 - , C.w_full 465 465 + [ "appearance-none" 466 466 + , "border-b" 467 467 + , "border-l-0" 468 468 + , "border-r-0" 469 469 + , "border-t-0" 470 470 + , "border-gray-400" 471 471 + , "bg-transparent" 472 472 + , "block" 473 473 + , "leading-normal" 474 474 + , "m-0" 475 475 + , "outline-none" 476 476 + , "py-2" 477 477 + , "px-0" 478 478 + , "rounded-none" 479 479 + , "text-base01" 480 480 + , "text-lg" 481 481 + , "w-full" 483 482 484 483 -- 485 485 - , C.focus__border_black 484 484 + , "focus:border-black" 486 485 487 486 -- Dark mode 488 487 ------------ 489 489 - , C.dark__border_base02 490 490 - , C.dark__text_gray_600 488 488 + , "dark:border-base02" 489 489 + , "dark:text-gray-600" 491 490 492 491 -- 493 493 - , C.dark__focus__border_base07 492 492 + , "dark:focus:border-base07" 494 493 ] 495 494 options 496 495 , chunk 497 497 - [ C.absolute 498 498 - , C.neg_translate_y_1over2 499 499 - , C.mt_px 500 500 - , C.right_0 501 501 - , C.text_0 502 502 - , C.top_1over2 503 503 - , C.transform 496 496 + [ "absolute" 497 497 + , "-translate-y-1/2" 498 498 + , "mt-px" 499 499 + , "right-0" 500 500 + , "text-0" 501 501 + , "top-1/2" 502 502 + , "transform" 504 503 ] 505 504 [ Icons.keyboard_arrow_down 20 Inherit ] 506 505 ] ··· 511 510 slab 512 511 Html.textarea 513 512 attributes 514 514 - [ C.bg_white 515 515 - , C.block 516 516 - , C.leading_normal 517 517 - , C.mb_4 518 518 - , C.p_4 519 519 - , C.resize_none 520 520 - , C.rounded 521 521 - , C.text_base01 522 522 - , C.text_sm 523 523 - , C.w_full 513 513 + [ "bg-white" 514 514 + , "block" 515 515 + , "leading-normal" 516 516 + , "mb-4" 517 517 + , "p-4" 518 518 + , "resize-none" 519 519 + , "rounded" 520 520 + , "text-base01" 521 521 + , "text-sm" 522 522 + , "w-full" 524 523 525 524 -- Dark mode 526 525 ------------ 527 527 - , C.dark__bg_darkest_hour 528 528 - , C.dark__text_gray_600 526 526 + , "dark:bg-darkest-hour" 527 527 + , "dark:text-gray-600" 529 528 ] 530 529 [] 531 530 ··· 535 534 slab 536 535 Html.button 537 536 [ onClick params.onClick ] 538 538 - [ C.appearance_none 539 539 - , C.bg_transparent 540 540 - , C.border_base04 541 541 - , C.border_b_2 542 542 - , C.text_inherit 543 543 - , C.leading_tight 544 544 - , C.m_0 545 545 - , C.p_0 546 546 - , C.cursor_pointer 537 537 + [ "appearance-none" 538 538 + , "bg-transparent" 539 539 + , "border-base04" 540 540 + , "border-b-2" 541 541 + , "text-inherit" 542 542 + , "leading-tight" 543 543 + , "m-0" 544 544 + , "p-0" 545 545 + , "cursor-pointer" 547 546 ] 548 547 [ Html.text params.label ] 549 548 ··· 553 552 slab 554 553 Html.input 555 554 attributes 556 556 - [ C.appearance_none 557 557 - , C.border_b 558 558 - , C.border_l_0 559 559 - , C.border_r_0 560 560 - , C.border_t_0 561 561 - , C.border_gray_400 562 562 - , C.bg_transparent 563 563 - , C.block 564 564 - , C.leading_normal 565 565 - , C.mt_1 566 566 - , C.py_2 567 567 - , C.rounded_none 568 568 - , C.text_base01 569 569 - , C.text_sm 570 570 - , C.w_full 555 555 + [ "appearance-none" 556 556 + , "border-b" 557 557 + , "border-l-0" 558 558 + , "border-r-0" 559 559 + , "border-t-0" 560 560 + , "border-gray-400" 561 561 + , "bg-transparent" 562 562 + , "block" 563 563 + , "leading-normal" 564 564 + , "mt-1" 565 565 + , "py-2" 566 566 + , "rounded-none" 567 567 + , "text-base01" 568 568 + , "text-sm" 569 569 + , "w-full" 571 570 572 571 -- 573 573 - , C.focus__border_black 574 574 - , C.focus__outline_none 572 572 + , "focus:border-black" 573 573 + , "focus:outline-none" 575 574 576 575 -- Dark mode 577 576 ------------ 578 578 - , C.dark__border_base02 579 579 - , C.dark__text_gray_600 577 577 + , "dark:border-base02" 578 578 + , "dark:text-gray-600" 580 579 581 580 -- 582 582 - , C.dark__focus__border_base07 581 581 + , "dark:focus:border-base07" 583 582 ] 584 583 [] 585 584 ··· 589 588 slab 590 589 Html.input 591 590 attributes 592 592 - [ C.bg_white 593 593 - , C.block 594 594 - , C.leading_normal 595 595 - , C.mb_3 596 596 - , C.p_3 597 597 - , C.resize_none 598 598 - , C.rounded 599 599 - , C.text_base01 600 600 - , C.text_sm 601 601 - , C.w_full 591 591 + [ "bg-white" 592 592 + , "block" 593 593 + , "leading-normal" 594 594 + , "mb-3" 595 595 + , "p-3" 596 596 + , "resize-none" 597 597 + , "rounded" 598 598 + , "text-base01" 599 599 + , "text-sm" 600 600 + , "w-full" 602 601 603 602 -- Dark mode 604 603 ------------ 605 605 - , C.dark__bg_darkest_hour 606 606 - , C.dark__text_gray_600 604 604 + , "dark:bg-darkest-hour" 605 605 + , "dark:text-gray-600" 607 606 ] 608 607 []

+26 -27

src/Applications/UI/List.elm

reviewed

··· 2 2 3 3 import Chunky exposing (..) 4 4 import Conditional exposing (..) 5 5 - import Css.Classes as C 6 5 import Html exposing (Html) 7 6 import Html.Attributes exposing (title) 8 7 import Html.Events exposing (onClick) ··· 44 43 view : Variant Int msg -> List (Item msg) -> Html msg 45 44 view variant items = 46 45 chunk 47 47 - [ C.antialiased, C.font_semibold, C.leading_snug, C.text_nearly_sm ] 46 46 + [ "antialiased", "font-semibold", "leading-snug", "text-nearly-sm" ] 48 47 (List.indexedMap (item variant) items) 49 48 50 49 ··· 66 65 DnD.isDraggingOver idx env.model 67 66 in 68 67 chunky 69 69 - [ C.border_t 68 68 + [ "border-t" 70 69 71 70 -- 72 71 , if dragTarget then 73 73 - C.border_base03 72 72 + "border-base03" 74 73 75 74 else 76 76 - C.border_transparent 75 75 + "border-transparent" 77 76 78 77 -- Dark mode 79 78 ------------ 80 79 , if dragTarget then 81 81 - C.dark__border_gray_300 80 80 + "dark:border-gray-300" 82 81 83 82 else 84 84 - C.dark__border_transparent 83 83 + "dark:border-transparent" 85 84 ] 86 85 <| 87 86 chunk 88 88 - [ C.border_b 89 89 - , C.border_gray_200 90 90 - , C.flex 91 91 - , C.items_center 87 87 + [ "border-b" 88 88 + , "border-gray-200" 89 89 + , "flex" 90 90 + , "items-center" 92 91 93 92 -- 94 94 - , ifThenElse (Maybe.isJust msg) C.cursor_pointer C.cursor_default 95 95 - , ifThenElse isSelected C.text_base03 C.text_inherit 93 93 + , ifThenElse (Maybe.isJust msg) "cursor-pointer" "cursor-default" 94 94 + , ifThenElse isSelected "text-base03" "text-inherit" 96 95 97 96 -- Dark mode 98 97 ------------ 99 99 - , C.dark__border_base00 100 100 - , ifThenElse isSelected C.dark__text_gray_300 C.dark__text_inherit 98 98 + , "dark:border-base00" 99 99 + , ifThenElse isSelected "dark:text-gray-300" "dark:text-inherit" 101 100 ] 102 101 [ -- Label 103 102 -------- ··· 125 124 ) 126 125 (DnD.listenToEnterLeave env idx) 127 126 ) 128 128 - [ C.flex_grow 129 129 - , C.py_4 130 130 - , C.overflow_hidden 127 127 + [ "flex-grow" 128 128 + , "py-4" 129 129 + , "overflow-hidden" 131 130 ] 132 131 [ label ] 133 132 134 133 -- Actions 135 134 ---------- 136 135 , chunk 137 137 - [ C.flex 138 138 - , C.items_center 136 136 + [ "flex" 137 137 + , "items-center" 139 138 140 139 -- 141 140 , case variant of 142 141 Normal -> 143 143 - C.pointer_events_auto 142 142 + "pointer-events-auto" 144 143 145 144 Draggable env -> 146 145 if DnD.isDragging env.model then 147 147 - C.pointer_events_none 146 146 + "pointer-events-none" 148 147 149 148 else 150 150 - C.pointer_events_auto 149 149 + "pointer-events-auto" 151 150 ] 152 151 (List.map actionView actions) 153 152 ] ··· 167 166 Nothing -> 168 167 [ title action.title ] 169 168 ) 170 170 - [ C.leading_0 171 171 - , C.ml_1 172 172 - , C.pl_1 173 173 - , ifThenElse (Maybe.isJust action.msg) C.cursor_pointer C.cursor_default 169 169 + [ "leading-0" 170 170 + , "ml-1" 171 171 + , "pl-1" 172 172 + , ifThenElse (Maybe.isJust action.msg) "cursor-pointer" "cursor-default" 174 173 ] 175 174 [ action.icon 16 Inherit ]

+65 -66

src/Applications/UI/Navigation.elm

reviewed

··· 4 4 import Chunky exposing (..) 5 5 import Common 6 6 import Conditional exposing (..) 7 7 - import Css.Classes as C 8 7 import Html exposing (Html, text) 9 8 import Html.Attributes exposing (href, style, tabindex, target, title) 10 9 import Html.Events exposing (onClick) ··· 45 44 global items alfred activePage = 46 45 brick 47 46 [ style "font-size" "11.25px" ] 48 48 - [ C.antialiased 49 49 - , C.font_semibold 50 50 - , C.mb_16 51 51 - , C.mt_8 52 52 - , C.text_xs 53 53 - , C.tracking_widest 54 54 - , C.uppercase 47 47 + [ "antialiased" 48 48 + , "font-semibold" 49 49 + , "mb-16" 50 50 + , "mt-8" 51 51 + , "text-xs" 52 52 + , "tracking-widest" 53 53 + , "uppercase" 55 54 56 55 -- 57 57 - , ifThenElse (Maybe.isJust alfred) C.opacity_0 C.opacity_100 56 56 + , ifThenElse (Maybe.isJust alfred) "opacity-0" "opacity-100" 58 57 ] 59 58 (List.indexedMap 60 59 (globalItem activePage <| List.length items) ··· 72 71 idx + 1 == totalItems 73 72 in 74 73 chunk 75 75 - [ C.inline_block 76 76 - , ifThenElse isLastItem C.mr_0 C.mr_1 74 74 + [ "inline-block" 75 75 + , ifThenElse isLastItem "mr-0" "mr-1" 77 76 ] 78 77 [ slab 79 78 Html.a 80 79 [ href (Page.toString page) ] 81 81 - [ C.inline_block 82 82 - , C.leading_normal 83 83 - , C.no_underline 84 84 - , C.cursor_pointer 85 85 - , C.pt_2 80 80 + [ "inline-block" 81 81 + , "leading-normal" 82 82 + , "no-underline" 83 83 + , "cursor-pointer" 84 84 + , "pt-2" 86 85 87 86 -- 88 88 - , ifThenElse isActivePage C.border_b C.border_b_0 89 89 - , ifThenElse isActivePage C.border_base01_15 C.border_transparent 90 90 - , ifThenElse isActivePage C.text_base01 C.text_base01_55 91 91 - , ifThenElse isLastItem C.mr_0 C.mr_8 87 87 + , ifThenElse isActivePage "border-b" "border-b-0" 88 88 + , ifThenElse isActivePage "border-base01-15" "border-transparent" 89 89 + , ifThenElse isActivePage "text-base01" "text-base01-55" 90 90 + , ifThenElse isLastItem "mr-0" "mr-8" 92 91 93 92 -- 94 94 - , C.focus__border_black_50 95 95 - , C.focus__outline_none 96 96 - , C.focus__text_black 93 93 + , "focus:border-black-50" 94 94 + , "focus:outline-none" 95 95 + , "focus:text-black" 97 96 ] 98 97 [ text label ] 99 98 ] ··· 112 111 localWithTabindex tabindex_ items = 113 112 brick 114 113 [ style "font-size" "12.5px" ] 115 115 - [ C.antialiased 116 116 - , C.border_b 117 117 - , C.border_gray_300 114 114 + [ "antialiased" 115 115 + , "border-b" 116 116 + , "border-gray-300" 118 117 119 118 -- Dark mode 120 119 ------------ 121 121 - , C.dark__border_base01 120 120 + , "dark:border-base01" 122 121 ] 123 122 [ chunk 124 124 - [ C.flex ] 123 123 + [ "flex" ] 125 124 (items 126 125 |> List.reverse 127 126 |> List.map (localItem tabindex_ { amount = List.length items }) ··· 172 171 -- 173 172 , tabindex tabindex_ 174 173 ] 175 175 - [ C.bg_transparent 176 176 - , C.border_gray_300 177 177 - , C.border_r 178 178 - , C.cursor_pointer 179 179 - , C.flex_basis_0 180 180 - , C.font_semibold 181 181 - , C.leading_none 182 182 - , C.no_underline 183 183 - , C.px_4 184 184 - , C.py_3 185 185 - , C.text_base02 174 174 + [ "bg-transparent" 175 175 + , "border-gray-300" 176 176 + , "border-r" 177 177 + , "cursor-pointer" 178 178 + , "flex-basis-0" 179 179 + , "font-semibold" 180 180 + , "leading-none" 181 181 + , "no-underline" 182 182 + , "px-4" 183 183 + , "py-3" 184 184 + , "text-base02" 186 185 187 186 -- 188 187 , ifThenElse 189 188 (labelText == Common.backToIndex && labelType == Hidden && amount > 1) 190 190 - C.flex_shrink_0 191 191 - C.flex_grow 189 189 + "flex-shrink-0" 190 190 + "flex-grow" 192 191 193 192 -- 194 193 , ifThenElse 195 194 (labelText == Common.backToIndex && labelType == Hidden && amount > 1) 196 196 - C.overflow_visible 197 197 - C.overflow_hidden 195 195 + "overflow-visible" 196 196 + "overflow-hidden" 198 197 199 198 -- 200 200 - , C.fixate__text_black 201 201 - , C.last__border_r_0 199 199 + , "fixate:text-black" 200 200 + , "last:border-r-0" 202 201 203 202 -- Responsive 204 203 ------------- 205 205 - , C.sm__overflow_visible 204 204 + , "sm:overflow-visible" 206 205 207 206 -- 208 207 , ifThenElse 209 208 (labelType == Hidden) 210 210 - C.sm__flex_shrink_0 211 211 - C.sm__flex_grow 209 209 + "sm:flex-shrink-0" 210 210 + "sm:flex-grow" 212 211 213 212 -- 214 213 , ifThenElse 215 214 (labelType == Hidden) 216 216 - C.sm__flex_grow_0 217 217 - C.sm__flex_grow 215 215 + "sm:flex-grow-0" 216 216 + "sm:flex-grow" 218 217 219 218 -- Dark mode 220 219 ------------ 221 221 - , C.dark__border_base01 222 222 - , C.dark__text_base06 220 220 + , "dark:border-base01" 221 221 + , "dark:text-base06" 223 222 224 223 -- 225 225 - , C.dark__fixate__text_base07 224 224 + , "dark:fixate:text-base07" 226 225 ] 227 226 [ chunk 228 228 - [ C.border_b 229 229 - , C.border_t 230 230 - , C.border_transparent 231 231 - , C.flex 232 232 - , C.items_center 233 233 - , C.justify_center 234 234 - , C.mt_px 235 235 - , C.pt_px 227 227 + [ "border-b" 228 228 + , "border-t" 229 229 + , "border-transparent" 230 230 + , "flex" 231 231 + , "items-center" 232 232 + , "justify-center" 233 233 + , "mt-px" 234 234 + , "pt-px" 236 235 ] 237 236 [ inline 238 238 - [ C.flex_shrink_0 ] 237 237 + [ "flex-shrink-0" ] 239 238 [ icon 16 Inherit ] 240 239 241 240 -- ··· 247 246 slab 248 247 Html.span 249 248 [] 250 250 - [ C.inline_block 251 251 - , C.leading_tight 252 252 - , C.ml_1 253 253 - , C.truncate 249 249 + [ "inline-block" 250 250 + , "leading-tight" 251 251 + , "ml-1" 252 252 + , "truncate" 254 253 ] 255 254 [ text labelText ] 256 255 ]

+41 -43

src/Applications/UI/Notifications.elm

reviewed

··· 4 4 import Color exposing (Color) 5 5 import Color.Manipulate 6 6 import Conditional exposing (ifThenElse) 7 7 - import Css.Classes as C 8 7 import Html exposing (Html, text) 9 8 import Html.Attributes exposing (class, rel, style) 10 9 import Html.Ext exposing (onDoubleTap, onTap) ··· 91 90 collection 92 91 |> List.reverse 93 92 |> List.map (Html.Lazy.lazy2 notificationView manipulatedColor) 94 94 - |> Html.div 95 95 - [ class "notifications" 93 93 + |> chunk 94 94 + [ "notifications" 96 95 97 96 -- 98 98 - , C.absolute 99 99 - , C.bottom_0 100 100 - , C.flex 101 101 - , C.flex_col 102 102 - , C.items_end 103 103 - , C.leading_snug 104 104 - , C.mb_4 105 105 - , C.mr_3 106 106 - , C.right_0 107 107 - , C.text_sm 108 108 - , C.z_50 97 97 + , "absolute" 98 98 + , "bottom-0" 99 99 + , "flex" 100 100 + , "flex-col" 101 101 + , "items-end" 102 102 + , "leading-snug" 103 103 + , "mb-4" 104 104 + , "mr-3" 105 105 + , "right-0" 106 106 + , "text-sm" 107 107 + , "z-50" 109 108 ] 110 109 111 110 ··· 124 123 dismissMsg = 125 124 DismissNotification { id = id } 126 125 in 127 127 - Html.div 126 126 + brick 128 127 [ if options.sticky then 129 128 onDoubleTap dismissMsg 130 129 ··· 135 134 , rel (String.fromInt id) 136 135 137 136 -- 138 138 - , C.duration_200 139 139 - , C.max_w_xs 140 140 - , C.mt_2 141 141 - , C.p_4 142 142 - , C.rounded 143 143 - , C.text_white_90 144 144 - 145 145 - -- 146 146 - , ifThenElse options.sticky C.cursor_pointer C.cursor_default 147 147 - , ifThenElse options.sticky C.select_none C.select_auto 148 148 - 149 149 - -- 150 137 , case kind of 151 138 Casual -> 152 139 Maybe.unwrap 153 153 - C.bg_white_20 140 140 + (class "bg-white-20") 154 141 (style "background-color" << Color.toCssString) 155 142 extractedBackdropColor 156 143 157 144 Error -> 158 158 - C.bg_base08 145 145 + class "bg-base08" 159 146 160 147 Success -> 161 161 - C.bg_base0b 148 148 + class "bg-base0b" 149 149 + ] 150 150 + [ "duration-200" 151 151 + , "max-w-xs" 152 152 + , "mt-2" 153 153 + , "p-4" 154 154 + , "rounded" 155 155 + , "text-white-90" 156 156 + 157 157 + -- 158 158 + , ifThenElse options.sticky "cursor-pointer" "cursor-default" 159 159 + , ifThenElse options.sticky "select-none" "select-auto" 162 160 163 161 -- 164 162 , if options.wasDismissed then 165 165 - C.transition 163 163 + "transition" 166 164 167 165 else 168 168 - C.transition_colors 166 166 + "transition-colors" 169 167 170 168 -- 171 169 , if options.wasDismissed then 172 172 - C.opacity_0 170 170 + "opacity-0" 173 171 174 172 else 175 175 - C.opacity_100 173 173 + "opacity-100" 176 174 ] 177 177 - [ Html.div 178 178 - [ C.mt_px, C.pt_px ] 175 175 + [ chunk 176 176 + [ "mt-px", "pt-px" ] 179 177 [ contents notification ] 180 178 181 179 -- 182 180 , if options.sticky && kind /= Casual then 183 183 - Html.div 184 184 - [ C.cursor_pointer 185 185 - , C.italic 186 186 - , C.mt_2 187 187 - , C.opacity_60 188 188 - , C.select_none 189 189 - , C.text_xs 181 181 + chunk 182 182 + [ "cursor-pointer" 183 183 + , "italic" 184 184 + , "mt-2" 185 185 + , "opacity-60" 186 186 + , "select-none" 187 187 + , "text-xs" 190 188 ] 191 189 [ text "Double click to dismiss" ] 192 190

+31 -32

src/Applications/UI/Playlists/View.elm

reviewed

··· 3 3 import Chunky exposing (..) 4 4 import Color exposing (Color) 5 5 import Common 6 6 - import Css.Classes as C 7 6 import Html exposing (Html, text) 8 7 import Html.Attributes exposing (href, placeholder, style, value) 9 8 import Html.Events exposing (onInput, onSubmit) ··· 137 136 ----------------------------------------- 138 137 , if List.isEmpty playlists then 139 138 chunk 140 140 - [ C.relative ] 139 139 + [ "relative" ] 141 140 [ chunk 142 142 - [ C.absolute, C.left_0, C.top_0 ] 141 141 + [ "absolute", "left-0", "top-0" ] 143 142 [ UI.Kit.canister [ UI.Kit.h1 "Playlists" ] ] 144 143 ] 145 144 ··· 184 183 [ slab 185 184 Html.a 186 185 [ href (Page.toString <| Page.Playlists New) ] 187 187 - [ C.block 188 188 - , C.opacity_30 189 189 - , C.text_inherit 186 186 + [ "block" 187 187 + , "opacity-30" 188 188 + , "text-inherit" 190 189 ] 191 190 [ Icons.waves 64 Inherit ] 192 191 , slab 193 192 Html.a 194 193 [ href (Page.toString <| Page.Playlists New) ] 195 195 - [ C.block 196 196 - , C.leading_normal 197 197 - , C.mt_2 198 198 - , C.opacity_40 199 199 - , C.text_center 200 200 - , C.text_inherit 194 194 + [ "block" 195 195 + , "leading-normal" 196 196 + , "mt-2" 197 197 + , "opacity-40" 198 198 + , "text-center" 199 199 + , "text-inherit" 201 200 ] 202 201 [ text "No playlists found, create one" 203 202 , lineBreak ··· 224 223 category : String -> Html Msg 225 224 category cat = 226 225 chunk 227 227 - [ C.antialiased 228 228 - , C.font_display 229 229 - , C.mb_3 230 230 - , C.mt_10 231 231 - , C.text_base05 232 232 - , C.text_xxs 233 233 - , C.truncate 234 234 - , C.uppercase 226 226 + [ "antialiased" 227 227 + , "font-display" 228 228 + , "mb-3" 229 229 + , "mt-10" 230 230 + , "text-base05" 231 231 + , "text-xxs" 232 232 + , "truncate" 233 233 + , "uppercase" 235 234 236 235 -- Dark mode 237 236 ------------ 238 238 - , C.dark__text_base04 237 237 + , "dark:text-base04" 239 238 ] 240 239 [ UI.Kit.inlineIcon Icons.folder 241 241 - , inline [ C.font_bold, C.ml_2 ] [ text cat ] 240 240 + , inline [ "font-bold", "ml-2" ] [ text cat ] 242 241 ] 243 242 244 243 ··· 293 292 , placeholder "The Classics" 294 293 ] 295 294 |> UI.Kit.textField 296 296 - |> chunky [ C.max_w_md, C.mx_auto ] 295 295 + |> chunky [ "max-w-md", "mx-auto" ] 297 296 298 297 -- Button 299 298 --------- 300 299 , chunk 301 301 - [ C.mt_10 ] 300 300 + [ "mt-10" ] 302 301 [ UI.Kit.button 303 302 Normal 304 303 Bypass ··· 312 311 |> slab 313 312 Html.form 314 313 [ onSubmit CreatePlaylist ] 315 315 - [ C.flex 316 316 - , C.flex_grow 317 317 - , C.text_center 314 314 + [ "flex" 315 315 + , "flex-grow" 316 316 + , "text-center" 318 317 ] 319 318 ] 320 319 ··· 357 356 value playlist.name 358 357 ] 359 358 |> UI.Kit.textField 360 360 - |> chunky [ C.max_w_md, C.mx_auto ] 359 359 + |> chunky [ "max-w-md", "mx-auto" ] 361 360 362 361 -- Button 363 362 --------- 364 363 , chunk 365 365 - [ C.mt_10 ] 364 364 + [ "mt-10" ] 366 365 [ UI.Kit.button 367 366 Normal 368 367 Bypass ··· 376 375 |> slab 377 376 Html.form 378 377 [ onSubmit ModifyPlaylist ] 379 379 - [ C.flex 380 380 - , C.flex_grow 381 381 - , C.text_center 378 378 + [ "flex" 379 379 + , "flex-grow" 380 380 + , "text-center" 382 381 ] 383 382 ] 384 383

+25 -26

src/Applications/UI/Queue/View.elm

reviewed

··· 3 3 import Chunky exposing (..) 4 4 import Common 5 5 import Conditional exposing (..) 6 6 - import Css.Classes as C 7 6 import Html exposing (Html, text) 8 7 import Html.Attributes exposing (href) 9 8 import Html.Lazy as Lazy ··· 78 77 ----------------------------------------- 79 78 , if List.isEmpty playingNext then 80 79 chunk 81 81 - [ C.relative ] 80 80 + [ "relative" ] 82 81 [ chunk 83 83 - [ C.absolute, C.left_0, C.top_0 ] 82 82 + [ "absolute", "left-0", "top-0" ] 84 83 [ UI.Kit.canister [ UI.Kit.h1 "Up next" ] ] 85 84 ] 86 85 ··· 95 94 , toMsg = UI.DnD 96 95 } 97 96 ) 98 98 - |> chunky [ C.mt_3 ] 97 97 + |> chunky [ "mt-3" ] 99 98 ] 100 99 101 100 -- ··· 104 103 [ slab 105 104 Html.a 106 105 [ href (Page.toString <| Page.Sources UI.Sources.Page.New) ] 107 107 - [ C.text_inherit, C.block, C.opacity_30 ] 106 106 + [ "text-inherit", "block", "opacity-30" ] 108 107 [ Icons.music_note 64 Inherit ] 109 108 , slab 110 109 Html.a 111 110 [ href (Page.toString <| Page.Sources UI.Sources.Page.New) ] 112 112 - [ C.text_inherit, C.block, C.leading_normal, C.mt_2, C.opacity_40, C.text_center ] 111 111 + [ "text-inherit", "block", "leading-normal", "mt-2", "opacity-40", "text-center" ] 113 112 [ text "Nothing here yet," 114 113 , lineBreak 115 114 , text "add some music first." ··· 141 140 in 142 141 { label = 143 142 inline 144 144 - [ C.block 145 145 - , C.truncate 143 143 + [ "block" 144 144 + , "truncate" 146 145 147 146 -- 148 147 , if item.manualEntry || isSelected then 149 149 - C.text_inherit 148 148 + "text-inherit" 150 149 151 150 else 152 152 - C.text_base05 151 151 + "text-base05" 153 152 154 153 -- Dark mode 155 154 ------------ 156 155 , if item.manualEntry || isSelected then 157 157 - C.dark__text_inherit 156 156 + "dark:text-inherit" 158 157 159 158 else 160 160 - C.dark__text_base04 159 159 + "dark:text-base04" 161 160 ] 162 161 [ inline 163 163 - [ C.inline_block 164 164 - , C.mr_2 165 165 - , C.opacity_60 166 166 - , C.text_xs 162 162 + [ "inline-block" 163 163 + , "mr-2" 164 164 + , "opacity-60" 165 165 + , "text-xs" 167 166 ] 168 167 [ text (String.fromInt <| idx + 1), text "." ] 169 168 , text (track.tags.artist ++ " - " ++ track.tags.title) ··· 202 201 } 203 202 204 203 205 205 - subtleFutureIconClasses : List (Html.Attribute UI.Msg) 204 204 + subtleFutureIconClasses : List String 206 205 subtleFutureIconClasses = 207 207 - [ C.text_gray_500 206 206 + [ "text-gray-500" 208 207 209 208 -- Dark mode 210 209 ------------ 211 211 - , C.dark__text_base02 210 210 + , "dark:text-base02" 212 211 ] 213 212 214 213 ··· 239 238 ----------------------------------------- 240 239 , if List.isEmpty playedPreviously then 241 240 chunk 242 242 - [ C.relative ] 241 241 + [ "relative" ] 243 242 [ chunk 244 244 - [ C.absolute, C.left_0, C.top_0 ] 243 243 + [ "absolute", "left-0", "top-0" ] 245 244 [ UI.Kit.canister [ UI.Kit.h1 "History" ] ] 246 245 ] 247 246 ··· 252 251 |> List.reverse 253 252 |> List.indexedMap historyItem 254 253 |> UI.List.view UI.List.Normal 255 255 - |> chunky [ C.mt_3 ] 254 254 + |> chunky [ "mt-3" ] 256 255 ] 257 256 258 257 -- 259 258 , if List.isEmpty playedPreviously then 260 259 UI.Kit.centeredContent 261 260 [ chunk 262 262 - [ C.opacity_30 ] 261 261 + [ "opacity-30" ] 263 262 [ Icons.music_note 64 Inherit ] 264 263 , chunk 265 265 - [ C.leading_normal, C.mt_2, C.opacity_40, C.text_center ] 264 264 + [ "leading-normal", "mt-2", "opacity-40", "text-center" ] 266 265 [ text "Nothing here yet," 267 266 , lineBreak 268 267 , text "play some music first." ··· 282 281 in 283 282 { label = 284 283 inline 285 285 - [ C.block, C.truncate ] 284 284 + [ "block", "truncate" ] 286 285 [ inline 287 287 - [ C.inline_block, C.text_xs, C.mr_2 ] 286 286 + [ "inline-block", "text-xs", "mr-2" ] 288 287 [ text (String.fromInt <| idx + 1), text "." ] 289 288 , text (track.tags.artist ++ " - " ++ track.tags.title) 290 289 ]

+63 -64

src/Applications/UI/Settings.elm

reviewed

··· 2 2 3 3 import Chunky exposing (..) 4 4 import Conditional exposing (ifThenElse) 5 5 - import Css.Classes as C 6 5 import Html exposing (Html, text) 7 6 import Html.Attributes exposing (..) 8 7 import Html.Events exposing (onClick) ··· 76 75 ----------------------------------------- 77 76 , deps 78 77 |> content 79 79 - |> chunk [ C.pb_4 ] 78 78 + |> chunk [ "pb-4" ] 80 79 |> List.singleton 81 80 |> UI.Kit.canister 82 81 ] ··· 141 140 -- Background 142 141 ----------------------------------------- 143 142 , chunk 144 144 - [ C.mt_8 ] 143 143 + [ "mt-8" ] 145 144 [ label "Background Image" 146 145 , Html.Lazy.lazy backgroundImage deps.chosenBackgroundImage 147 146 ] ··· 150 149 -- Row 1 151 150 ----------------------------------------- 152 151 , chunk 153 153 - [ C.flex, C.flex_wrap, C.pt_2 ] 152 152 + [ "flex", "flex-wrap", "pt-2" ] 154 153 [ chunk 155 155 - [ C.w_full, C.md__w_1over2 ] 154 154 + [ "w-full", "md:w-1/2" ] 156 155 [ label "Downloaded tracks" 157 156 , UI.Kit.buttonWithColor 158 157 UI.Kit.Gray ··· 164 163 -- Last.fm 165 164 ---------- 166 165 , chunk 167 167 - [ C.w_1over2 ] 166 166 + [ "w-1/2" ] 168 167 [ label "Last.fm scrobbling" 169 168 170 169 -- ··· 195 194 -- Row 2 196 195 ----------------------------------------- 197 196 , chunk 198 198 - [ C.flex, C.flex_wrap ] 197 197 + [ "flex", "flex-wrap" ] 199 198 [ chunk 200 200 - [ C.w_full, C.md__w_1over2 ] 199 199 + [ "w-full", "md:w-1/2" ] 201 200 [ label "Hide Duplicates" 202 201 , UI.Kit.checkbox 203 202 { checked = deps.hideDuplicateTracks ··· 205 204 } 206 205 ] 207 206 , chunk 208 208 - [ C.w_full, C.md__w_1over2 ] 207 207 + [ "w-full", "md:w-1/2" ] 209 208 [ label "Process sources automatically" 210 209 , UI.Kit.checkbox 211 210 { checked = deps.processAutomatically ··· 218 217 -- Row 3 219 218 ----------------------------------------- 220 219 , chunk 221 221 - [ C.flex, C.flex_wrap ] 220 220 + [ "flex", "flex-wrap" ] 222 221 [ chunk 223 223 - [ C.w_full, C.md__w_1over2 ] 222 222 + [ "w-full", "md:w-1/2" ] 224 223 [ label "Remember position on long tracks" 225 224 , UI.Kit.checkbox 226 225 { checked = deps.rememberProgress ··· 234 233 label : String -> Html msg 235 234 label l = 236 235 chunk 237 237 - [ C.mb_3, C.mt_6, C.pb_px ] 236 236 + [ "mb-3", "mt-6", "pb-px" ] 238 237 [ UI.Kit.label [] l ] 239 238 240 239 ··· 266 265 backgroundImage : Maybe String -> Html Msg 267 266 backgroundImage chosenBackground = 268 267 chunk 269 269 - [ C.flex, C.flex_wrap ] 268 268 + [ "flex", "flex-wrap" ] 270 269 (List.map 271 270 (\( filename, backdropLabel ) -> 272 271 let ··· 275 274 in 276 275 brick 277 276 [ onClick (ChooseBackdrop filename) ] 278 278 - [ C.cursor_pointer 279 279 - , C.h_0 280 280 - , C.overflow_hidden 281 281 - , C.pt_1over8 282 282 - , C.relative 283 283 - , C.w_1over5 277 277 + [ "cursor-pointer" 278 278 + , "h-0" 279 279 + , "overflow-hidden" 280 280 + , "pt-1/8" 281 281 + , "relative" 282 282 + , "w-1/5" 284 283 285 284 -- 286 286 - , C.md__pt_1over16 287 287 - , C.md__w_1over10 285 285 + , "md:pt-1/16" 286 286 + , "md:w-1/10" 288 287 ] 289 288 [ if isActive then 290 289 chunk 291 291 - [ C.absolute 292 292 - , C.bg_base04 293 293 - , C.inset_0 294 294 - , C.mb_1 295 295 - , C.mr_1 296 296 - , C.rounded_sm 297 297 - , C.z_10 290 290 + [ "absolute" 291 291 + , "bg-base04" 292 292 + , "inset-0" 293 293 + , "mb-1" 294 294 + , "mr-1" 295 295 + , "rounded-sm" 296 296 + , "z-10" 298 297 299 298 -- 300 300 - , C.sm__mb_2 301 301 - , C.sm__mr_2 299 299 + , "sm:mb-2" 300 300 + , "sm:mr-2" 302 301 303 302 -- 304 304 - , C.md__mb_1 305 305 - , C.md__mr_1 303 303 + , "md:mb-1" 304 304 + , "md:mr-1" 306 305 ] 307 306 [] 308 307 ··· 319 318 |> String.append "url(images/Background/Thumbnails/" 320 319 |> style "background-image" 321 320 ] 322 322 - [ C.absolute 323 323 - , C.bg_cover 324 324 - , C.inset_0 325 325 - , C.mb_1 326 326 - , C.mr_1 327 327 - , C.rounded_sm 328 328 - , C.z_20 321 321 + [ "absolute" 322 322 + , "bg-cover" 323 323 + , "inset-0" 324 324 + , "mb-1" 325 325 + , "mr-1" 326 326 + , "rounded-sm" 327 327 + , "z-20" 329 328 330 329 -- 331 331 - , C.sm__mb_2 332 332 - , C.sm__mr_2 330 330 + , "sm:mb-2" 331 331 + , "sm:mr-2" 333 332 334 333 -- 335 335 - , C.md__mb_1 336 336 - , C.md__mr_1 334 334 + , "md:mb-1" 335 335 + , "md:mr-1" 337 336 338 337 -- 339 339 - , ifThenElse isActive C.opacity_20 C.opacity_100 338 338 + , ifThenElse isActive "opacity-20" "opacity-100" 340 339 ] 341 340 [] 342 341 343 342 -- 344 343 , if isActive then 345 344 chunk 346 346 - [ C.absolute 347 347 - , C.inset_0 348 348 - , C.flex 349 349 - , C.font_semibold 350 350 - , C.items_center 351 351 - , C.justify_center 352 352 - , C.leading_snug 353 353 - , C.mb_1 354 354 - , C.mr_1 355 355 - , C.px_2 356 356 - , C.text_center 357 357 - , C.text_white 358 358 - , C.text_xs 359 359 - , C.z_30 345 345 + [ "absolute" 346 346 + , "inset-0" 347 347 + , "flex" 348 348 + , "font-semibold" 349 349 + , "items-center" 350 350 + , "justify-center" 351 351 + , "leading-snug" 352 352 + , "mb-1" 353 353 + , "mr-1" 354 354 + , "px-2" 355 355 + , "text-center" 356 356 + , "text-white" 357 357 + , "text-xs" 358 358 + , "z-30" 360 359 361 360 -- 362 362 - , C.sm__mb_2 363 363 - , C.sm__mr_2 361 361 + , "sm:mb-2" 362 362 + , "sm:mr-2" 364 363 365 364 -- 366 366 - , C.md__mb_1 367 367 - , C.md__mr_1 365 365 + , "md:mb-1" 366 366 + , "md:mr-1" 368 367 369 368 -- Dark mode 370 369 ------------ 371 371 - , C.dark__text_base07 370 370 + , "dark:text-base07" 372 371 ] 373 372 [ chunk 374 374 - [ C.mt_px ] 373 373 + [ "mt-px" ] 375 374 [ Icons.check 16 Inherit ] 376 375 ] 377 376

+12 -13

src/Applications/UI/Settings/ImportExport.elm

reviewed

··· 1 1 module UI.Settings.ImportExport exposing (view) 2 2 3 3 import Chunky exposing (..) 4 4 - import Css.Classes as C 5 4 import Html exposing (Html, text) 6 5 import Material.Icons as Icons 7 6 import UI.Kit exposing (ButtonType(..)) ··· 40 39 -------- 41 40 , [ UI.Kit.inlineIcon Icons.warning 42 41 , inline 43 43 - [ C.font_semibold ] 42 42 + [ "font-semibold" ] 44 43 [ text "All your data will be replaced when you import something." ] 45 44 ] 46 45 |> raw ··· 48 47 49 48 -- 50 49 , chunk 51 51 - [ C.sm__flex, C.sm__neg_mt_6 ] 50 50 + [ "sm:flex", "sm:neg-mt-6" ] 52 51 [ -- Import 53 52 --------- 54 53 chunk 55 55 - [ C.flex_auto, C.pr_2 ] 56 56 - [ chunk [ C.mb_2, C.mt_8 ] [ UI.Kit.label [] "Import" ] 54 54 + [ "flex-auto", "pr-2" ] 55 55 + [ chunk [ "mb-2", "mt-8" ] [ UI.Kit.label [] "Import" ] 57 56 , UI.Kit.buttonWithColor 58 57 UI.Kit.Gray 59 58 Normal ··· 75 74 -- Export 76 75 --------- 77 76 , chunk 78 78 - [ C.flex_auto, C.pl_2 ] 79 79 - [ chunk [ C.mb_2, C.mt_8 ] [ UI.Kit.label [] "Export" ] 77 77 + [ "flex-auto", "pl-2" ] 78 78 + [ chunk [ "mb-2", "mt-8" ] [ UI.Kit.label [] "Export" ] 80 79 , UI.Kit.button 81 80 Normal 82 81 Export ··· 84 83 85 84 -- 86 85 , chunk 87 87 - [ C.italic, C.leading_normal, C.mt_5, C.text_xs ] 86 86 + [ "italic", "leading-normal", "mt-5", "text-xs" ] 88 87 [ text "Other options:" ] 89 88 , chunk 90 90 - [ C.leading_normal, C.mt_2, C.text_sm ] 91 91 - [ inline [ C.mr_2 ] [ text "•" ] 89 89 + [ "leading-normal", "mt-2", "text-sm" ] 90 90 + [ inline [ "mr-2" ] [ text "•" ] 92 91 , UI.Kit.textButton 93 92 { label = "Migrate to another storage" 94 93 , onClick = MigrateHypaethralUserData ··· 104 103 otherImportOptions = 105 104 raw 106 105 [ chunk 107 107 - [ C.italic, C.leading_normal, C.mt_5, C.text_xs ] 106 106 + [ "italic", "leading-normal", "mt-5", "text-xs" ] 108 107 [ text "Other options:" ] 109 108 , chunk 110 110 - [ C.leading_normal, C.mt_2, C.text_sm ] 111 111 - [ inline [ C.mr_2 ] [ text "•" ] 109 109 + [ "leading-normal", "mt-2", "text-sm" ] 110 110 + [ inline [ "mr-2" ] [ text "•" ] 112 111 , UI.Kit.textButton 113 112 { label = "Import Diffuse V1 data" 114 113 , onClick = ImportLegacyData

+39 -40

src/Applications/UI/Sources/Form.elm

reviewed

··· 3 3 import Chunky exposing (..) 4 4 import Common exposing (boolFromString, boolToString) 5 5 import Conditional exposing (..) 6 6 - import Css.Classes as C 7 6 import Dict.Ext as Dict 8 7 import Html exposing (Html, text) 9 8 import Html.Attributes exposing (for, name, placeholder, required, selected, type_, value) ··· 111 110 -- Button 112 111 --------- 113 112 , chunk 114 114 - [ C.mt_10 ] 113 113 + [ "mt-10" ] 115 114 [ UI.Kit.button 116 115 IconOnly 117 116 Bypass ··· 139 138 , (\h -> 140 139 form TakeStep 141 140 [ chunk 142 142 - [ C.text_left, C.w_full ] 141 141 + [ "text-left", "w-full" ] 143 142 [ UI.Kit.canister h ] 144 143 ] 145 144 ) ··· 162 161 List.splitAt (ceiling dividingPoint) properties 163 162 in 164 163 chunk 165 165 - [ C.flex, C.pt_3 ] 164 164 + [ "flex", "pt-3" ] 166 165 [ chunk 167 167 - [ C.flex_grow, C.pr_4 ] 166 166 + [ "flex-grow", "pr-4" ] 168 167 (List.map (renderProperty context) listA) 169 168 , chunk 170 170 - [ C.flex_grow, C.pl_4 ] 169 169 + [ "flex-grow", "pl-4" ] 171 170 (List.map (renderProperty context) listB) 172 171 ] 173 172 174 173 -- Button 175 174 --------- 176 175 , chunk 177 177 - [ C.mt_3, C.text_center ] 176 176 + [ "mt-3", "text-center" ] 178 177 [ UI.Kit.button 179 178 IconOnly 180 179 Bypass ··· 187 186 howNote : List (Html Msg) -> Html Msg 188 187 howNote = 189 188 chunk 190 190 - [ C.text_sm 191 191 - , C.italic 192 192 - , C.leading_normal 193 193 - , C.max_w_lg 194 194 - , C.mb_8 189 189 + [ "text-sm" 190 190 + , "italic" 191 191 + , "leading-normal" 192 192 + , "max-w-lg" 193 193 + , "mb-8" 195 194 ] 196 195 197 196 ··· 224 223 Dict.fetch "name" "" context.data 225 224 in 226 225 chunk 227 227 - [ C.flex 228 228 - , C.max_w_md 229 229 - , C.mt_8 230 230 - , C.mx_auto 231 231 - , C.justify_center 232 232 - , C.w_full 226 226 + [ "flex" 227 227 + , "max-w-md" 228 228 + , "mt-8" 229 229 + , "mx-auto" 230 230 + , "justify-center" 231 231 + , "w-full" 233 232 ] 234 233 [ UI.Kit.textField 235 234 [ name "name" ··· 241 240 -- Note 242 241 ------- 243 242 , chunk 244 244 - [ C.mt_16 ] 243 243 + [ "mt-16" ] 245 244 (case context.service of 246 245 AmazonS3 -> 247 246 corsWarning "CORS__S3" ··· 281 280 corsWarning : String -> List (Html Msg) 282 281 corsWarning id = 283 282 [ chunk 284 284 - [ C.text_sm, C.flex, C.items_center, C.justify_center, C.leading_snug, C.opacity_50 ] 283 283 + [ "text-sm", "flex", "items-center", "justify-center", "leading-snug", "opacity-50" ] 285 284 [ UI.Kit.inlineIcon Icons.warning 286 285 , inline 287 287 - [ C.font_semibold ] 286 286 + [ "font-semibold" ] 288 287 [ text "Make sure CORS is enabled" ] 289 288 ] 290 289 , chunk 291 291 - [ C.text_sm, C.leading_snug, C.mb_8, C.mt_1, C.opacity_50 ] 290 290 + [ "text-sm", "leading-snug", "mb-8", "mt-1", "opacity-50" ] 292 291 [ text "You can find the instructions over " 293 292 , UI.Kit.link { label = "here", url = "about/cors/#" ++ id } 294 293 ] ··· 317 316 , (\h -> 318 317 form EditSourceUsingForm 319 318 [ chunk 320 320 - [ C.text_left, C.w_full ] 319 319 + [ "text-left", "w-full" ] 321 320 [ UI.Kit.canister h ] 322 321 ] 323 322 ) ··· 340 339 List.splitAt (ceiling dividingPoint) properties 341 340 in 342 341 chunk 343 343 - [ C.flex, C.pt_3 ] 342 342 + [ "flex", "pt-3" ] 344 343 [ chunk 345 345 - [ C.flex_grow, C.pr_4 ] 344 344 + [ "flex-grow", "pr-4" ] 346 345 (List.map (renderProperty context) listA) 347 346 , chunk 348 348 - [ C.flex_grow, C.pl_4 ] 347 347 + [ "flex-grow", "pl-4" ] 349 348 (List.map (renderProperty context) listB) 350 349 ] 351 350 352 351 -- Button 353 352 --------- 354 353 , chunk 355 355 - [ C.mt_3, C.text_center ] 354 354 + [ "mt-3", "text-center" ] 356 355 [ UI.Kit.button 357 356 Normal 358 357 Bypass ··· 369 368 renderProperty : Source -> Property -> Html Msg 370 369 renderProperty context property = 371 370 chunk 372 372 - [ C.mb_8 ] 371 371 + [ "mb-8" ] 373 372 [ UI.Kit.label 374 373 [ for property.key ] 375 374 property.label ··· 386 385 |> boolFromString 387 386 in 388 387 chunk 389 389 - [ C.mt_2, C.pt_1 ] 388 388 + [ "mt-2", "pt-1" ] 390 389 [ UI.Kit.checkbox 391 390 { checked = bool 392 391 , toggleMsg = ··· 418 417 slab 419 418 Html.form 420 419 [ onSubmit msg ] 421 421 - [ C.flex 422 422 - , C.flex_grow 423 423 - , C.flex_shrink_0 424 424 - , C.text_center 420 420 + [ "flex" 421 421 + , "flex-grow" 422 422 + , "flex-shrink-0" 423 423 + , "text-center" 425 424 ] 426 425 [ UI.Kit.centeredContent html ] 427 426 ··· 440 439 441 440 Btfs -> 442 441 howNote 443 443 - [ inline [ C.font_semibold ] [ text "Diffuse will try to use the default local gateway" ] 442 442 + [ inline [ "font-semibold" ] [ text "Diffuse will try to use the default local gateway" ] 444 443 , text "." 445 444 , lineBreak 446 445 , text "If you would like to use another gateway, please provide it below." ··· 451 450 Dropbox -> 452 451 howNote 453 452 [ inline 454 454 - [ C.font_semibold ] 453 453 + [ "font-semibold" ] 455 454 [ text "If you don't know what any of this is, " 456 455 , text "continue to the next screen." 457 456 ] ··· 463 462 Google -> 464 463 howNote 465 464 [ inline 466 466 - [ C.font_semibold ] 465 465 + [ "font-semibold" ] 467 466 [ text "If you don't know what any of this is, " 468 467 , text "continue to the next screen." 469 468 ] ··· 475 474 476 475 Ipfs -> 477 476 howNote 478 478 - [ inline [ C.font_semibold ] [ text "Diffuse will try to use the default local gateway" ] 477 477 + [ inline [ "font-semibold" ] [ text "Diffuse will try to use the default local gateway" ] 479 478 , text "." 480 479 , lineBreak 481 480 , text "If you would like to use another gateway, please provide it below." ··· 484 483 WebDav -> 485 484 howNote 486 485 [ inline 487 487 - [ C.font_semibold ] 486 486 + [ "font-semibold" ] 488 487 [ UI.Kit.inlineIcon Icons.warning 489 488 , text "This app requires a proper implementation of " 490 489 , UI.Kit.link ··· 543 542 , value (Dict.fetch "name" "" context.data) 544 543 ] 545 544 |> UI.Kit.textField 546 546 - |> chunky [ C.max_w_md, C.mx_auto ] 545 545 + |> chunky [ "max-w-md", "mx-auto" ] 547 546 548 547 -- Button 549 548 --------- 550 549 , chunk 551 551 - [ C.mt_10 ] 550 550 + [ "mt-10" ] 552 551 [ UI.Kit.button 553 552 Normal 554 553 Bypass

+14 -15

src/Applications/UI/Sources/View.elm

reviewed

··· 2 2 3 3 import Chunky exposing (..) 4 4 import Conditional exposing (ifThenElse) 5 5 - import Css.Classes as C 6 5 import Dict.Ext as Dict 7 6 import Html exposing (Html, text) 8 7 import Html.Attributes exposing (href) ··· 118 117 ----------------------------------------- 119 118 , if List.isEmpty model.sources then 120 119 chunk 121 121 - [ C.relative ] 120 120 + [ "relative" ] 122 121 [ chunk 123 123 - [ C.absolute, C.left_0, C.top_0 ] 122 122 + [ "absolute", "left-0", "top-0" ] 124 123 [ UI.Kit.canister [ UI.Kit.h1 "Sources" ] ] 125 124 ] 126 125 ··· 154 153 [ slab 155 154 Html.a 156 155 [ href (Page.toString <| Page.Sources New) ] 157 157 - [ C.block 158 158 - , C.opacity_30 159 159 - , C.text_inherit 156 156 + [ "block" 157 157 + , "opacity-30" 158 158 + , "text-inherit" 160 159 ] 161 160 [ Icons.music_note 64 Inherit ] 162 161 , slab 163 162 Html.a 164 163 [ href (Page.toString <| Page.Sources New) ] 165 165 - [ C.block 166 166 - , C.leading_normal 167 167 - , C.mt_2 168 168 - , C.opacity_40 169 169 - , C.text_center 170 170 - , C.text_inherit 164 164 + [ "block" 165 165 + , "leading-normal" 166 166 + , "mt-2" 167 167 + , "opacity-40" 168 168 + , "text-center" 169 169 + , "text-inherit" 171 170 ] 172 171 [ text "A source is a place where music is stored," 173 172 , lineBreak 174 173 , text "add one so you can play some music " 175 174 , inline 176 176 - [ C.align_middle, C.inline_block, C.neg_mt_px ] 175 175 + [ "align-middle", "inline-block", "-mt-px" ] 177 176 [ Icons.add 14 Inherit ] 178 177 ] 179 178 ] ··· 215 214 \_ _ -> 216 215 if progress < 0.05 then 217 216 inline 218 218 - [ C.inline_block, C.opacity_70, C.px_1 ] 217 217 + [ "inline-block", "opacity-70", "px-1" ] 219 218 [ case processIndex of 220 219 Just 0 -> 221 220 Html.text "Listing" ··· 232 231 |> (\s -> s ++ "%") 233 232 |> Html.text 234 233 |> List.singleton 235 235 - |> inline [ C.inline_block, C.opacity_70, C.px_1 ] 234 234 + |> inline [ "inline-block", "opacity-70", "px-1" ] 236 235 , msg = Nothing 237 236 , title = "" 238 237 }

+30 -32

src/Applications/UI/Tracks/Scene.elm

reviewed

··· 1 1 module UI.Tracks.Scene exposing (..) 2 2 3 3 + import Chunky exposing (..) 3 4 import Conditional exposing (..) 4 4 - import Css.Classes as C 5 5 import Html exposing (Html, text) 6 6 import Html.Attributes as A 7 7 import Material.Icons as Icons ··· 21 21 |> Maybe.map .name 22 22 |> Maybe.withDefault "Unknown" 23 23 in 24 24 - Html.div 25 25 - [ A.style "height" "18px" 24 24 + brick 25 25 + [ A.style "height" "18px" ] 26 26 + [ "box-content" 27 27 + , "font-display" 28 28 + , "font-semibold" 29 29 + , "leading-normal" 30 30 + , "pb-3" 31 31 + , "px-4" 32 32 + , "text-base04" 33 33 + , "text-xxs" 34 34 + , "tracking-tad-further" 35 35 + , "truncate" 26 36 27 37 -- 28 28 - , C.box_content 29 29 - , C.font_display 30 30 - , C.font_semibold 31 31 - , C.leading_normal 32 32 - , C.pb_3 33 33 - , C.px_4 34 34 - , C.text_base04 35 35 - , C.text_xxs 36 36 - , C.tracking_tad_further 37 37 - , C.truncate 38 38 - 39 39 - -- 40 40 - , ifThenElse (0 == index) C.pt_3 C.pt_4 38 38 + , ifThenElse (0 == index) "pt-3" "pt-4" 41 39 ] 42 40 [ groupIcon 43 43 - , Html.span [ C.align_middle ] [ text groupName ] 41 41 + , inline [ "align-middle" ] [ text groupName ] 44 42 ] 45 43 46 44 47 45 shadow : Html msg 48 46 shadow = 49 49 - Html.div 50 50 - [ C.h_10 51 51 - , C.left_0 52 52 - , C.neg_mt_10 53 53 - , C.neg_translate_y_full 54 54 - , C.opacity_30 55 55 - , C.right_0 56 56 - , C.shadow_md 57 57 - , C.sticky 58 58 - , C.top_0 59 59 - , C.transform 60 60 - , C.z_10 47 47 + chunk 48 48 + [ "h-10" 49 49 + , "left-0" 50 50 + , "-mt-10" 51 51 + , "-translate-y-full" 52 52 + , "opacity-30" 53 53 + , "right-0" 54 54 + , "shadow-md" 55 55 + , "sticky" 56 56 + , "top-0" 57 57 + , "transform" 58 58 + , "z-10" 61 59 62 60 -- Dark mode 63 61 ------------ 64 64 - , C.dark__shadow_md_darker 62 62 + , "dark:shadow-md-darker" 65 63 ] 66 64 [] 67 65 ··· 72 70 73 71 groupIcon : Html msg 74 72 groupIcon = 75 75 - Html.span 76 76 - [ C.align_middle, C.inline_block, C.leading_0, C.pr_2 ] 73 73 + inline 74 74 + [ "align-middle", "inline-block", "leading-0", "pr-2" ] 77 75 [ Icons.library_music 16 Inherit ]

+168 -169

src/Applications/UI/Tracks/Scene/Covers.elm

reviewed

··· 5 5 import Color exposing (Color) 6 6 import Conditional exposing (ifThenElse) 7 7 import Coordinates 8 8 - import Css.Classes as C 9 8 import Dict exposing (Dict) 10 9 import Html exposing (Html, text) 11 11 - import Html.Attributes as A exposing (id, style, tabindex) 10 10 + import Html.Attributes as A exposing (class, id, style, tabindex) 12 11 import Html.Events as E 13 12 import Html.Events.Extra.Mouse as Mouse 14 13 import Html.Lazy ··· 63 62 64 63 view_ : Dependencies -> Html Msg 65 64 view_ deps = 66 66 - Html.div 67 67 - [ C.flex 68 68 - , C.flex_basis_0 69 69 - , C.flex_col 70 70 - , C.flex_grow 71 71 - , C.relative 65 65 + chunk 66 66 + [ "flex" 67 67 + , "flex-basis-0" 68 68 + , "flex-col" 69 69 + , "flex-grow" 70 70 + , "relative" 72 71 ] 73 72 [ collectionView deps 74 73 , case deps.selectedCover of ··· 95 94 (tabindex (ifThenElse deps.isVisible 0 -1)) 96 95 viewAttributes 97 96 ) 98 98 - [ C.flex_basis_0 99 99 - , C.flex_grow 100 100 - , C.outline_none 101 101 - , C.overflow_x_hidden 102 102 - , C.overflow_y_auto 103 103 - , C.relative 104 104 - , C.scrolling_touch 105 105 - , C.text_almost_sm 97 97 + [ "flex-basis-0" 98 98 + , "flex-grow" 99 99 + , "outline-none" 100 100 + , "overflow-x-hidden" 101 101 + , "overflow-y-auto" 102 102 + , "relative" 103 103 + , "scrolling-touch" 104 104 + , "text-almost-sm" 106 105 ] 107 106 [ Scene.shadow 108 108 - , Html.div 109 109 - [ C.bg_white 110 110 - , C.flex 111 111 - , C.items_center 112 112 - , C.pt_5 113 113 - , C.px_5 114 114 - , C.relative 115 115 - , C.z_20 107 107 + , chunk 108 108 + [ "bg-white" 109 109 + , "flex" 110 110 + , "items-center" 111 111 + , "pt-5" 112 112 + , "px-5" 113 113 + , "relative" 114 114 + , "z-20" 116 115 117 116 -- Dark mode 118 117 ------------ 119 119 - , C.dark__bg_darkest_hour 118 118 + , "dark:bg-darkest-hour" 120 119 ] 121 120 [ sortGroupButtons deps.sortBy 122 121 123 122 -- 124 124 - , Html.div 125 125 - [ C.flex 126 126 - , C.flex_auto 127 127 - , C.items_center 128 128 - , C.justify_end 129 129 - , C.text_base05 130 130 - , C.text_right 131 131 - , C.text_xs 123 123 + , chunk 124 124 + [ "flex" 125 125 + , "flex-auto" 126 126 + , "items-center" 127 127 + , "justify-end" 128 128 + , "text-base05" 129 129 + , "text-right" 130 130 + , "text-xs" 132 131 ] 133 132 [ text (String.fromInt amountOfCovers) 134 133 , case deps.sortBy of ··· 156 155 Desc -> 157 156 A.title "Sorted alphabetically descending" 158 157 ] 159 159 - [ C.cursor_pointer 160 160 - , C.ml_1 161 161 - , C.opacity_60 158 158 + [ "cursor-pointer" 159 159 + , "ml-1" 160 160 + , "opacity-60" 162 161 ] 163 162 [ case deps.sortDirection of 164 163 Asc -> ··· 244 243 in 245 244 brick 246 245 [ tabindex (ifThenElse deps.isVisible 0 -1) ] 247 247 - [ C.absolute 248 248 - , C.bg_white 249 249 - , C.flex_basis_0 250 250 - , C.flex_grow 251 251 - , C.inset_0 252 252 - , C.leading_tight 253 253 - , C.outline_none 254 254 - , C.overflow_x_hidden 255 255 - , C.overflow_y_auto 256 256 - , C.text_almost_sm 257 257 - , C.z_30 246 246 + [ "absolute" 247 247 + , "bg-white" 248 248 + , "flex-basis-0" 249 249 + , "flex-grow" 250 250 + , "inset-0" 251 251 + , "leading-tight" 252 252 + , "outline-none" 253 253 + , "overflow-x-hidden" 254 254 + , "overflow-y-auto" 255 255 + , "text-almost-sm" 256 256 + , "z-30" 258 257 259 258 -- Dark mode 260 259 ------------ 261 261 - , C.dark__bg_darkest_hour 260 260 + , "dark:bg-darkest-hour" 262 261 ] 263 263 - [ Html.div 264 264 - [ C.flex 265 265 - , C.font_semibold 266 266 - , C.h_8 267 267 - , C.items_center 268 268 - , C.leading_none 269 269 - , C.neg_ml_2 270 270 - , C.mt_5 271 271 - , C.px_5 262 262 + [ chunk 263 263 + [ "flex" 264 264 + , "font-semibold" 265 265 + , "h-8" 266 266 + , "items-center" 267 267 + , "leading-none" 268 268 + , "-ml-2" 269 269 + , "mt-5" 270 270 + , "px-5" 272 271 ] 273 272 [ headerButton 274 273 [ E.onClick (TracksMsg DeselectCover) ] ··· 285 284 ] 286 285 287 286 -- 288 288 - , Html.div 289 289 - [ C.mb_6 290 290 - , C.neg_top_px 291 291 - , C.mt_4 292 292 - , C.relative 287 287 + , chunk 288 288 + [ "mb-6" 289 289 + , "-top-px" 290 290 + , "mt-4" 291 291 + , "relative" 293 292 294 293 -- 295 295 - , ifThenElse condensedView C.block C.flex 296 296 - , ifThenElse condensedView C.mx_5 C.ml_5 294 294 + , ifThenElse condensedView "block" "flex" 295 295 + , ifThenElse condensedView "mx-5" "ml-5" 297 296 ] 298 297 [ itemView 299 298 { clickable = False, horizontal = condensedView } ··· 315 314 } 316 315 0 317 316 ) 318 318 - |> Html.div 319 319 - [ ifThenElse condensedView C.px_px C.px_0 ] 317 317 + |> chunk 318 318 + [ ifThenElse condensedView "px-px" "px-0" ] 320 319 |> List.singleton 321 321 - |> Html.div 322 322 - [ C.flex_auto 323 323 - , C.flex_basis_0 324 324 - , C.overflow_hidden 325 325 - , C.select_none 320 320 + |> chunk 321 321 + [ "flex-auto" 322 322 + , "flex-basis-0" 323 323 + , "overflow-hidden" 324 324 + , "select-none" 326 325 327 326 -- 328 328 - , ifThenElse condensedView C.neg_mx_5 C.mx_5 329 329 - , ifThenElse condensedView C.px_1 C.px_0 327 327 + , ifThenElse condensedView "-mx-5" "mx-5" 328 328 + , ifThenElse condensedView "px-1" "px-0" 330 329 ] 331 330 ] 332 331 ] ··· 339 338 headerButton attributes { active, label } = 340 339 brick 341 340 attributes 342 342 - [ C.cursor_pointer 343 343 - , C.inline_flex 344 344 - , C.h_8 345 345 - , C.items_center 346 346 - , C.overflow_hidden 347 347 - , C.px_2 348 348 - , C.rounded 341 341 + [ "cursor-pointer" 342 342 + , "inline-flex" 343 343 + , "h-8" 344 344 + , "items-center" 345 345 + , "overflow-hidden" 346 346 + , "px-2" 347 347 + , "rounded" 349 348 350 349 -- 351 351 - , ifThenElse active C.bg_gray_300 C.bg_transparent 352 352 - , ifThenElse active C.dark__bg_base01 C.dark__bg_transparent 350 350 + , ifThenElse active "bg-gray-300" "bg-transparent" 351 351 + , ifThenElse active "dark:bg-base01" "dark:bg-transparent" 353 352 ] 354 354 - [ Html.div 355 355 - [ C.mt_px, C.pt_px ] 353 353 + [ chunk 354 354 + [ "mt-px", "pt-px" ] 356 355 [ label ] 357 356 ] 358 357 ··· 370 369 371 370 sortGroupButtons : SortBy -> Html Msg 372 371 sortGroupButtons sortBy = 373 373 - Html.div 374 374 - [ C.flex 375 375 - , C.h_8 376 376 - , C.items_center 377 377 - , C.leading_none 378 378 - , C.mr_3 379 379 - , C.text_xs 380 380 - , C.tracking_tad_further 372 372 + chunk 373 373 + [ "flex" 374 374 + , "h-8" 375 375 + , "items-center" 376 376 + , "leading-none" 377 377 + , "mr-3" 378 378 + , "text-xs" 379 379 + , "tracking-tad-further" 381 380 ] 382 381 [ sortGroupButton 383 382 { current = sortBy, btn = Artist } 384 384 - (Html.div 385 385 - [ C.inline_flex, C.items_center ] 386 386 - [ inline [ C.mr_px ] [ Icons.people_alt 16 Inherit ] 387 387 - , inline [ C.ml_1, C.mt_px, C.pl_px, C.pt_px ] [ text "Artists" ] 383 383 + (chunk 384 384 + [ "inline-flex", "items-center" ] 385 385 + [ inline [ "mr-px" ] [ Icons.people_alt 16 Inherit ] 386 386 + , inline [ "ml-1", "mt-px", "pl-px", "pt-px" ] [ text "Artists" ] 388 387 ] 389 388 ) 390 389 391 390 -- 392 391 , sortGroupButton 393 392 { current = sortBy, btn = Album } 394 394 - (Html.div 395 395 - [ C.inline_flex, C.items_center ] 396 396 - [ inline [ C.mr_px ] [ Icons.album 16 Inherit ] 397 397 - , inline [ C.ml_1, C.mt_px, C.pt_px ] [ text "Albums" ] 393 393 + (chunk 394 394 + [ "inline-flex", "items-center" ] 395 395 + [ inline [ "mr-px" ] [ Icons.album 16 Inherit ] 396 396 + , inline [ "ml-1", "mt-px", "pt-px" ] [ text "Albums" ] 398 397 ] 399 398 ) 400 399 ] ··· 409 408 |> E.onClick 410 409 411 410 -- 412 412 - , C.mr_1 411 411 + , class "mr-1" 413 412 ] 414 413 { active = current == btn 415 414 , label = label ··· 478 477 479 478 listStyles : List (Html.Attribute msg) 480 479 listStyles = 481 481 - [ C.leading_tight 482 482 - , C.pl_5 483 483 - , C.pt_4 480 480 + [ class "leading-tight" 481 481 + , class "pl-5" 482 482 + , class "pt-4" 484 483 ] 485 484 486 485 ··· 590 589 raw 591 590 [ case ( shouldRenderGroup, maybeIdentifiers ) of 592 591 ( True, Just identifiers ) -> 593 593 - Html.div 594 594 - [ C.neg_ml_4 ] 592 592 + chunk 593 593 + [ "-ml-4" ] 595 594 [ Scene.group { index = idx } identifiers ] 596 595 597 596 _ -> 598 597 nothing 599 598 600 599 -- 601 601 - , Html.div 602 602 - [ C.flex, C.flex_wrap ] 600 600 + , chunk 601 601 + [ "flex", "flex-wrap" ] 603 602 (List.map (itemView { clickable = True, horizontal = False } itemDeps) row) 604 603 ] 605 604 ··· 633 632 634 633 itemView : ItemViewOptions -> ItemDependencies -> Cover -> Html Msg 635 634 itemView options deps cover = 636 636 - Html.div 637 637 - [ C.antialiased 638 638 - , C.flex_shrink_0 639 639 - , C.font_semibold 635 635 + chunk 636 636 + [ "antialiased" 637 637 + , "flex-shrink-0" 638 638 + , "font-semibold" 640 639 641 640 -- 642 642 - , ifThenElse options.horizontal C.flex C.block 643 643 - , ifThenElse options.horizontal C.mb_0 C.mb_5 641 641 + , ifThenElse options.horizontal "flex" "block" 642 642 + , ifThenElse options.horizontal "mb-0" "mb-5" 644 643 645 644 -- 646 645 , case ( options.horizontal, deps.columns ) of 647 646 ( True, _ ) -> 648 648 - C.w_auto 647 647 + "w-auto" 649 648 650 649 ( False, 1 ) -> 651 651 - C.w_full 650 650 + "w-full" 652 651 653 652 ( False, 2 ) -> 654 654 - C.w_1over2 653 653 + "w-1/2" 655 654 656 655 ( False, 3 ) -> 657 657 - C.w_1over3 656 656 + "w-1/3" 658 657 659 658 _ -> 660 660 - C.w_1over4 659 659 + "w-1/4" 661 660 ] 662 661 [ coverView options deps cover 663 662 , metadataView options deps cover ··· 712 711 else 713 712 [] 714 713 in 715 715 - Html.div 716 716 - [ C.flex_shrink_0 717 717 - , C.mr_5 718 718 - , C.relative 714 714 + chunk 715 715 + [ "flex-shrink-0" 716 716 + , "mr-5" 717 717 + , "relative" 719 718 720 719 -- 721 721 - , ifThenElse clickable C.cursor_pointer C.cursor_default 722 722 - , ifThenElse horizontal C.h_32 C.h_0 723 723 - , ifThenElse horizontal C.mb_4 C.pt_full 724 724 - , ifThenElse horizontal C.w_32 C.w_auto 720 720 + , ifThenElse clickable "cursor-pointer" "cursor-default" 721 721 + , ifThenElse horizontal "h-32" "h-0" 722 722 + , ifThenElse horizontal "mb-4" "pt-full" 723 723 + , ifThenElse horizontal "w-32" "w-auto" 725 724 ] 726 725 [ brick 727 726 (List.append ··· 735 734 [] 736 735 ) 737 736 ) 738 738 - [ C.absolute 739 739 - , C.bg_cover 740 740 - , C.bg_gray_300 741 741 - , C.mb_5 742 742 - , C.inset_0 743 743 - , C.rounded_md 744 744 - , C.shadow 737 737 + [ "absolute" 738 738 + , "bg-cover" 739 739 + , "bg-gray-300" 740 740 + , "mb-5" 741 741 + , "inset-0" 742 742 + , "rounded-md" 743 743 + , "shadow" 745 744 746 745 -- 747 747 - , ifThenElse horizontal C.h_32 C.h_auto 746 746 + , ifThenElse horizontal "h-32" "h-auto" 748 747 749 748 -- Dark mode 750 749 ------------ 751 751 - , C.dark__bg_white_025 750 750 + , "dark:bg-white-025" 752 751 ] 753 752 [ if not hasBackgroundImage then 754 754 - Html.div 755 755 - [ C.absolute 756 756 - , C.left_1over2 757 757 - , C.neg_translate_x_1over2 758 758 - , C.neg_translate_y_1over2 759 759 - , C.text_gray_400 760 760 - , C.top_1over2 761 761 - , C.transform 753 753 + chunk 754 754 + [ "absolute" 755 755 + , "left-1/2" 756 756 + , "-translate-x-1/2" 757 757 + , "-translate-y-1/2" 758 758 + , "text-gray-400" 759 759 + , "top-1/2" 760 760 + , "transform" 762 761 763 762 -- Dark mode 764 763 ------------ 765 765 - , C.dark__text_base01 764 764 + , "dark:text-base01" 766 765 ] 767 766 [ Icons.album 26 Inherit ] 768 767 ··· 779 778 [ style "-webkit-filter" dropShadow 780 779 , style "filter" dropShadow 781 780 ] 782 782 - [ C.absolute 783 783 - , C.bottom_0 784 784 - , C.mb_3 785 785 - , C.mr_3 786 786 - , C.right_0 787 787 - , C.text_white 781 781 + [ "absolute" 782 782 + , "bottom-0" 783 783 + , "mb-3" 784 784 + , "mr-3" 785 785 + , "right-0" 786 786 + , "text-white" 788 787 ] 789 788 [ Icons.headset 16 Inherit ] 790 789 ··· 815 814 else 816 815 [] 817 816 ) 818 818 - [ C.mr_5 819 819 - , C.relative 820 820 - , C.tracking_tad_closer 821 821 - , C.z_10 817 817 + [ "mr-5" 818 818 + , "relative" 819 819 + , "tracking-tad-closer" 820 820 + , "z-10" 822 821 823 822 -- 824 824 - , ifThenElse clickable C.cursor_pointer C.cursor_default 825 825 - , ifThenElse horizontal C.mt_0 C.neg_mt_5 826 826 - , ifThenElse horizontal C.overflow_hidden C.overflow_auto 827 827 - , ifThenElse horizontal C.pt_0 C.pt_2 823 823 + , ifThenElse clickable "cursor-pointer" "cursor-default" 824 824 + , ifThenElse horizontal "mt-0" "-mt-5" 825 825 + , ifThenElse horizontal "overflow-hidden" "overflow-auto" 826 826 + , ifThenElse horizontal "pt-0" "pt-2" 828 827 ] 829 829 - [ Html.div 830 830 - [ C.mt_px 831 831 - , C.pt_px 832 832 - , C.truncate 828 828 + [ chunk 829 829 + [ "mt-px" 830 830 + , "pt-px" 831 831 + , "truncate" 833 832 ] 834 833 [ case sortBy of 835 834 Album -> ··· 843 842 ] 844 843 845 844 -- 846 846 - , Html.div 847 847 - [ C.mt_px 848 848 - , C.pt_px 849 849 - , C.text_base05 850 850 - , C.text_xs 851 851 - , C.truncate 845 845 + , chunk 846 846 + [ "mt-px" 847 847 + , "pt-px" 848 848 + , "text-base05" 849 849 + , "text-xs" 850 850 + , "truncate" 852 851 ] 853 852 [ case sortBy of 854 853 Album ->

+81 -84

src/Applications/UI/Tracks/Scene/List.elm

reviewed

··· 6 6 import Color.Manipulate as Color 7 7 import Conditional exposing (ifThenElse) 8 8 import Coordinates 9 9 - import Css.Classes as C 10 9 import Html exposing (Html, text) 11 11 - import Html.Attributes exposing (id, style, tabindex) 10 10 + import Html.Attributes exposing (class, id, style, tabindex) 12 11 import Html.Events 13 12 import Html.Events.Extra.Mouse as Mouse 14 13 import Html.Lazy ··· 56 55 (tabindex (ifThenElse deps.isVisible 0 -1)) 57 56 viewAttributes 58 57 ) 59 59 - [ C.flex_basis_0 60 60 - , C.flex_grow 61 61 - , C.outline_none 62 62 - , C.overflow_x_hidden 63 63 - , C.relative 64 64 - , C.select_none 65 65 - , C.scrolling_touch 66 66 - , C.text_xs 58 58 + [ "flex-basis-0" 59 59 + , "flex-grow" 60 60 + , "outline-none" 61 61 + , "overflow-x-hidden" 62 62 + , "relative" 63 63 + , "select-none" 64 64 + , "scrolling-touch" 65 65 + , "text-xs" 67 66 68 67 -- 69 69 - , C.md__text_almost_sm 68 68 + , "md:text-almost-sm" 70 69 71 70 -- 72 71 , case maybeDnD of 73 72 Just dnd -> 74 73 if deps.isTouchDevice && DnD.isDragging dnd then 75 75 - C.overflow_y_hidden 74 74 + "overflow-y-hidden" 76 75 77 76 else 78 78 - C.overflow_y_auto 77 77 + "overflow-y-auto" 79 78 80 79 Nothing -> 81 81 - C.overflow_y_auto 80 80 + "overflow-y-auto" 82 81 ] 83 82 [ Scene.shadow 84 83 ··· 129 128 viewAttributes = 130 129 [ InfiniteList.onScroll (InfiniteListMsg >> TracksMsg) 131 130 , id containerId 132 132 - , C.overscroll_none 131 131 + , class "overscroll-none" 133 132 ] 134 133 135 134 ··· 154 153 ifThenElse (sortBy == s) (Just sortIcon) Nothing 155 154 in 156 155 chunk 157 157 - [ C.antialiased 158 158 - , C.bg_white 159 159 - , C.border_b 160 160 - , C.border_gray_300 161 161 - , C.flex 162 162 - , C.font_semibold 163 163 - , C.relative 164 164 - , C.text_base06 165 165 - , C.text_xxs 166 166 - , C.z_20 156 156 + [ "antialiased" 157 157 + , "bg-white" 158 158 + , "border-b" 159 159 + , "border-gray-300" 160 160 + , "flex" 161 161 + , "font-semibold" 162 162 + , "relative" 163 163 + , "text-base06" 164 164 + , "text-xxs" 165 165 + , "z-20" 167 166 168 167 -- Dark mode 169 168 ------------ 170 170 - , C.dark__bg_darkest_hour 171 171 - , C.dark__border_base01 172 172 - , C.dark__text_base03 169 169 + , "dark:bg-darkest-hour" 170 170 + , "dark:border-base01" 171 171 + , "dark:text-base03" 173 172 ] 174 173 (if isPlaylist && showAlbum then 175 174 [ headerColumn "" 4.5 Nothing Bypass ··· 214 213 , style "min-width" columnMinWidth 215 214 , style "width" (String.fromFloat width ++ "%") 216 215 ] 217 217 - [ C.border_l 218 218 - , C.border_gray_300 219 219 - , C.leading_relaxed 220 220 - , C.pl_2 221 221 - , C.pr_2 222 222 - , C.pt_px 223 223 - , C.relative 216 216 + [ "border-l" 217 217 + , "border-gray-300" 218 218 + , "leading-relaxed" 219 219 + , "pl-2" 220 220 + , "pr-2" 221 221 + , "pt-px" 222 222 + , "relative" 224 223 225 224 -- 226 225 , case msg of 227 226 Bypass -> 228 228 - C.cursor_default 227 227 + "cursor-default" 229 228 230 229 _ -> 231 231 - C.cursor_pointer 230 230 + "cursor-pointer" 232 231 233 232 -- 234 234 - , C.first__border_l_0 235 235 - , C.first__cursor_default 236 236 - , C.first__pl_4 237 237 - , C.last__pr_4 233 233 + , "first:border-l-0" 234 234 + , "first:cursor-default" 235 235 + , "first:pl-4" 236 236 + , "last:pr-4" 238 237 239 238 -- Dark mode 240 239 ------------ 241 241 - , C.dark__border_base01 240 240 + , "dark:border-base01" 242 241 ] 243 242 [ chunk 244 244 - [ C.mt_px, C.opacity_90, C.pt_px ] 243 243 + [ "mt-px", "opacity-90", "pt-px" ] 245 244 [ Html.text text_ ] 246 245 , case maybeSortIcon of 247 246 Just sortIcon -> 248 247 chunk 249 249 - [ C.absolute 250 250 - , C.neg_translate_y_1over2 251 251 - , C.mr_1 252 252 - , C.opacity_90 253 253 - , C.right_0 254 254 - , C.top_1over2 255 255 - , C.transform 248 248 + [ "absolute" 249 249 + , "-translate-y-1/2" 250 250 + , "mr-1" 251 251 + , "opacity-90" 252 252 + , "right-0" 253 253 + , "top-1/2" 254 254 + , "transform" 256 255 ] 257 256 [ sortIcon ] 258 257 ··· 349 348 350 349 listStyles : List (Html.Attribute msg) 351 350 listStyles = 352 352 - [ C.pb_2 353 353 - , C.pt_1 354 354 - ] 351 351 + [ class "pb-2 pt-1" ] 355 352 356 353 357 354 dynamicRowHeight : Int -> IdentifiedTrack -> Int ··· 438 435 ] 439 436 ] 440 437 ) 441 441 - [ C.flex 442 442 - , C.items_center 438 438 + [ "flex" 439 439 + , "items-center" 443 440 444 441 -- 445 445 - , ifThenElse identifiers.isMissing C.cursor_default C.cursor_pointer 446 446 - , ifThenElse isSelected C.font_semibold C.font_normal 447 447 - , ifThenElse roundedCorners C.rounded C.border_r_0 442 442 + , ifThenElse identifiers.isMissing "cursor-default" "cursor-pointer" 443 443 + , ifThenElse isSelected "font-semibold" "font-normal" 444 444 + , ifThenElse roundedCorners "rounded" "border-r-0" 448 445 449 446 -- 450 447 , ifThenElse 451 448 isOddRow 452 452 - C.bg_white 453 453 - C.bg_gray_100 449 449 + "bg-white" 450 450 + "bg-gray-100" 454 451 455 452 -- Dark mode 456 453 ------------ 457 454 , ifThenElse 458 455 isOddRow 459 459 - C.dark__bg_darkest_hour 460 460 - C.dark__bg_near_darkest_hour 456 456 + "dark:bg-darkest-hour" 457 457 + "dark:bg-near-darkest-hour" 461 458 ] 462 459 (if not showArtist && not showAlbum then 463 460 [ favouriteColumn "5.75%" favouritesOnly favIdentifiers derivedColors ··· 553 550 [] 554 551 ] 555 552 ) 556 556 - [ C.flex 557 557 - , C.items_center 553 553 + [ "flex" 554 554 + , "items-center" 558 555 559 556 -- 560 560 - , ifThenElse identifiers.isMissing C.cursor_default C.cursor_pointer 561 561 - , ifThenElse isSelected C.font_semibold C.font_normal 557 557 + , ifThenElse identifiers.isMissing "cursor-default" "cursor-pointer" 558 558 + , ifThenElse isSelected "font-semibold" "font-normal" 562 559 563 560 -- 564 561 , ifThenElse 565 562 isOddRow 566 566 - C.bg_white 567 567 - C.bg_gray_100 563 563 + "bg-white" 564 564 + "bg-gray-100" 568 565 569 566 -- Dark mode 570 567 ------------ 571 568 , ifThenElse 572 569 isOddRow 573 573 - C.dark__bg_darkest_hour 574 574 - C.dark__bg_near_darkest_hour 570 570 + "dark:bg-darkest-hour" 571 571 + "dark:bg-near-darkest-hour" 575 572 ] 576 573 (if showAlbum then 577 574 [ favouriteColumn defFavColWidth favouritesOnly favIdentifiers derivedColors ··· 756 753 ] 757 754 (favouriteColumnStyles favouritesOnly identifiers derivedColors) 758 755 ) 759 759 - [ C.flex_shrink_0 760 760 - , C.font_normal 761 761 - , C.pl_4 762 762 - , C.text_gray_500 756 756 + [ "flex-shrink-0" 757 757 + , "font-normal" 758 758 + , "pl-4" 759 759 + , "text-gray-500" 763 760 764 761 -- Dark mode 765 762 ------------ 766 766 - , C.dark__text_base02 763 763 + , "dark:text-base02" 767 764 ] 768 765 [ if identifiers.isFavourite then 769 766 text "t" ··· 799 796 playlistIndexColumn indexInPlaylist = 800 797 brick 801 798 (otherColumnStyles "4.5%") 802 802 - [ C.pl_2 803 803 - , C.pr_2 804 804 - , C.pointer_events_none 805 805 - , C.truncate 799 799 + [ "pl-2" 800 800 + , "pr-2" 801 801 + , "pointer-events-none" 802 802 + , "truncate" 806 803 ] 807 804 [ indexInPlaylist 808 805 |> (+) 1 ··· 815 812 otherColumn width isLast text_ = 816 813 brick 817 814 (otherColumnStyles width) 818 818 - [ C.pl_2 819 819 - , C.pr_2 820 820 - , C.pointer_events_none 821 821 - , C.truncate 815 815 + [ "pl-2" 816 816 + , "pr-2" 817 817 + , "pointer-events-none" 818 818 + , "truncate" 822 819 823 820 -- 824 824 - , C.last__pr_4 821 821 + , "last:pr-4" 825 822 ] 826 823 [ text text_ ] 827 824

+108 -104

src/Applications/UI/Tracks/View.elm

reviewed

··· 3 3 import Chunky exposing (..) 4 4 import Color exposing (Color) 5 5 import Conditional exposing (ifThenElse) 6 6 - import Css.Classes as C 7 6 import Html exposing (Html, text) 8 8 - import Html.Attributes exposing (attribute, class, href, placeholder, style, tabindex, target, title, value) 7 7 + import Html.Attributes exposing (attribute, href, placeholder, style, tabindex, target, title, value) 9 8 import Html.Events exposing (onBlur, onClick, onInput) 10 9 import Html.Events.Extra.Mouse as Mouse 11 10 import Html.Ext exposing (onEnterKey) ··· 107 106 ] 108 107 109 108 110 110 - viewClasses : List (Html.Attribute UI.Msg) 109 109 + viewClasses : List String 111 110 viewClasses = 112 112 - [ C.flex 113 113 - , C.flex_col 114 114 - , C.flex_grow 111 111 + [ "flex" 112 112 + , "flex-col" 113 113 + , "flex-grow" 115 114 ] 116 115 117 116 ··· 122 121 ifThenElse isOnIndexPage 0 -1 123 122 in 124 123 chunk 125 125 - [ C.sm__flex ] 124 124 + [ "sm:flex" ] 126 125 [ ----------------------------------------- 127 126 -- Part 1 128 127 ----------------------------------------- 129 128 chunk 130 130 - [ C.border_b 131 131 - , C.border_r 132 132 - , C.border_gray_300 133 133 - , C.flex 134 134 - , C.flex_grow 135 135 - , C.h_12 136 136 - , C.mt_px 137 137 - , C.px_1 138 138 - , C.overflow_hidden 139 139 - , C.relative 140 140 - , C.text_gray_600 129 129 + [ "border-b" 130 130 + , "border-r" 131 131 + , "border-gray-300" 132 132 + , "flex" 133 133 + , "flex-grow" 134 134 + , "h-12" 135 135 + , "mt-px" 136 136 + , "px-1" 137 137 + , "overflow-hidden" 138 138 + , "relative" 139 139 + , "text-gray-600" 141 140 142 141 -- Responsive 143 142 ------------- 144 144 - , C.sm__h_auto 145 145 - , C.sm__px_0 143 143 + , "sm:h-auto" 144 144 + , "sm:px-0" 146 145 147 146 -- Dark mode 148 147 ------------ 149 149 - , C.dark__border_base01 150 150 - , C.dark__text_base04 148 148 + , "dark:border-base01" 149 149 + , "dark:text-base04" 151 150 ] 152 151 [ -- Input 153 152 -------- ··· 162 161 , tabindex tabindex_ 163 162 , value (Maybe.withDefault "" searchTerm) 164 163 ] 165 165 - [ C.bg_transparent 166 166 - , C.border_none 167 167 - , C.flex_grow 168 168 - , C.h_full 169 169 - , C.min_w_0 170 170 - , C.ml_1 171 171 - , C.mt_px 172 172 - , C.outline_none 173 173 - , C.pl_8 174 174 - , C.pr_2 175 175 - , C.pt_px 176 176 - , C.text_base02 177 177 - , C.text_sm 178 178 - , C.w_full 164 164 + [ "bg-transparent" 165 165 + , "border-none" 166 166 + , "flex-grow" 167 167 + , "h-full" 168 168 + , "min-w-0" 169 169 + , "ml-1" 170 170 + , "mt-px" 171 171 + , "outline-none" 172 172 + , "pl-8" 173 173 + , "pr-2" 174 174 + , "pt-px" 175 175 + , "text-base02" 176 176 + , "text-sm" 177 177 + , "w-full" 179 178 180 179 -- Dark mode 181 180 ------------ 182 182 - , C.dark__text_base06 181 181 + , "dark:text-base06" 183 182 ] 184 183 [] 185 184 186 185 -- Search icon 187 186 -------------- 188 187 , chunk 189 189 - [ C.absolute 190 190 - , C.bottom_0 191 191 - , C.flex 192 192 - , C.items_center 193 193 - , C.left_0 194 194 - , C.ml_3 195 195 - , C.mt_px 196 196 - , C.pl_1 197 197 - , C.top_0 198 198 - , C.z_0 188 188 + [ "absolute" 189 189 + , "bottom-0" 190 190 + , "flex" 191 191 + , "items-center" 192 192 + , "left-0" 193 193 + , "ml-3" 194 194 + , "mt-px" 195 195 + , "pl-1" 196 196 + , "top-0" 197 197 + , "z-0" 199 198 200 199 -- Responsive 201 200 ------------- 202 202 - , C.sm__pl_0 201 201 + , "sm:pl-0" 203 202 ] 204 203 [ Icons.search 16 Inherit ] 205 204 206 205 -- Actions 207 206 ---------- 208 207 , chunk 209 209 - [ C.flex 210 210 - , C.items_center 211 211 - , C.mr_3 212 212 - , C.mt_px 213 213 - , C.pt_px 214 214 - , C.space_x_4 208 208 + [ "flex" 209 209 + , "items-center" 210 210 + , "mr-3" 211 211 + , "mt-px" 212 212 + , "pt-px" 213 213 + , "space-x-4" 215 214 216 215 -- Responsive 217 216 ------------- 218 218 - , C.sm__space_x_2 217 217 + , "sm:space-x-2" 219 218 ] 220 219 [ -- 1 221 220 case searchTerm of ··· 224 223 [ onClick (TracksMsg ClearSearch) 225 224 , title "Clear search" 226 225 ] 227 227 - [ C.cursor_pointer 228 228 - , C.mt_px 226 226 + [ "cursor-pointer" 227 227 + , "mt-px" 229 228 ] 230 229 [ Icons.clear 16 Inherit ] 231 230 ··· 237 236 [ onClick (TracksMsg ToggleFavouritesOnly) 238 237 , title "Toggle favourites-only" 239 238 ] 240 240 - [ C.cursor_pointer ] 239 239 + [ "cursor-pointer" ] 241 240 [ case favouritesOnly of 242 241 True -> 243 242 Icons.favorite 16 (Color UI.Kit.colorKit.base08) ··· 256 255 |> TracksMsg 257 256 |> onClick 258 257 ] 259 259 - [ C.ml_6 260 260 - , C.mr_px 261 261 - , C.cursor_pointer 258 258 + [ "ml-6" 259 259 + , "mr-px" 260 260 + , "cursor-pointer" 262 261 ] 263 262 [ chunk 264 264 - [ C.pl_1 ] 263 263 + [ "pl-1" ] 265 264 [ Icons.notes 18 Inherit ] 266 265 ] 267 266 ··· 273 272 |> TracksMsg 274 273 |> onClick 275 274 ] 276 276 - [ C.cursor_pointer 277 277 - , C.mr_px 275 275 + [ "cursor-pointer" 276 276 + , "mr-px" 278 277 ] 279 278 [ chunk 280 280 - [ C.pl_1 ] 279 279 + [ "pl-1" ] 281 280 [ Icons.burst_mode 20 Inherit ] 282 281 ] 283 282 ··· 286 285 [ Mouse.onClick (TracksMsg << ShowViewMenu maybeGrouping) 287 286 , title "View settings" 288 287 ] 289 289 - [ C.cursor_pointer ] 288 288 + [ "cursor-pointer" ] 290 289 [ Icons.more_vert 16 Inherit ] 291 290 292 291 -- 5 ··· 302 301 |> Color.toCssString 303 302 |> style "background-color" 304 303 ] 305 305 - [ C.antialiased 306 306 - , C.cursor_pointer 307 307 - , C.duration_500 308 308 - , C.font_bold 309 309 - , C.leading_none 310 310 - , C.px_1 311 311 - , C.py_1 312 312 - , C.rounded 313 313 - , C.truncate 314 314 - , C.text_white_90 315 315 - , C.text_xxs 316 316 - , C.transition 304 304 + [ "antialiased" 305 305 + , "cursor-pointer" 306 306 + , "duration-500" 307 307 + , "font-bold" 308 308 + , "leading-none" 309 309 + , "px-1" 310 310 + , "py-1" 311 311 + , "rounded" 312 312 + , "truncate" 313 313 + , "text-white-90" 314 314 + , "text-xxs" 315 315 + , "transition" 317 316 318 317 -- Dark mode 319 318 ------------ 320 320 - , C.dark__text_white_60 319 319 + , "dark:text-white-60" 321 320 ] 322 321 [ chunk 323 323 - [ C.px_px, C.pt_px ] 322 322 + [ "px-px", "pt-px" ] 324 323 [ text playlist.name ] 325 324 ] 326 325 ··· 352 351 noTracksView : List String -> Int -> Int -> Int -> Html UI.Msg 353 352 noTracksView processingContext amountOfSources amountOfTracks amountOfFavourites = 354 353 chunk 355 355 - [ class "no-tracks-view", C.flex, C.flex_grow ] 354 354 + [ "no-tracks-view" 355 355 + 356 356 + -- 357 357 + , "flex" 358 358 + , "flex-grow" 359 359 + ] 356 360 [ UI.Kit.centeredContent 357 361 [ if List.length processingContext > 0 then 358 362 message "Processing Tracks" 359 363 360 364 else if amountOfSources == 0 then 361 365 chunk 362 362 - [ C.flex 363 363 - , C.flex_wrap 364 364 - , C.items_start 365 365 - , C.justify_center 366 366 - , C.px_3 366 366 + [ "flex" 367 367 + , "flex-wrap" 368 368 + , "items-start" 369 369 + , "justify-center" 370 370 + , "px-3" 367 371 ] 368 372 [ ----------------------------------------- 369 373 -- Add 370 374 ----------------------------------------- 371 375 inline 372 372 - [ C.mb_4 373 373 - , C.mx_2 374 374 - , C.whitespace_no_wrap 376 376 + [ "mb-4" 377 377 + , "mx-2" 378 378 + , "whitespace-nowrap" 375 379 ] 376 380 [ UI.Kit.buttonLink 377 381 (Sources.NewOnboarding ··· 390 394 -- Demo 391 395 ----------------------------------------- 392 396 , inline 393 393 - [ C.mb_4 394 394 - , C.mx_2 395 395 - , C.whitespace_no_wrap 397 397 + [ "mb-4" 398 398 + , "mx-2" 399 399 + , "whitespace-nowrap" 396 400 ] 397 401 [ UI.Kit.buttonWithColor 398 402 UI.Kit.Gray ··· 409 413 -- How 410 414 ----------------------------------------- 411 415 , inline 412 412 - [ C.mb_4 413 413 - , C.mx_2 414 414 - , C.whitespace_no_wrap 416 416 + [ "mb-4" 417 417 + , "mx-2" 418 418 + , "whitespace-nowrap" 415 419 ] 416 420 [ UI.Kit.buttonWithOptions 417 421 Html.a ··· 441 445 buttonContents : List (Html UI.Msg) -> Html UI.Msg 442 446 buttonContents = 443 447 inline 444 444 - [ C.flex 445 445 - , C.items_center 446 446 - , C.leading_0 448 448 + [ "flex" 449 449 + , "items-center" 450 450 + , "leading-0" 447 451 ] 448 452 449 453 450 454 message : String -> Html UI.Msg 451 455 message m = 452 456 chunk 453 453 - [ C.border_b_2 454 454 - , C.border_current_color 455 455 - , C.text_sm 456 456 - , C.font_semibold 457 457 - , C.leading_snug 458 458 - , C.pb_1 457 457 + [ "border-b-2" 458 458 + , "border-current-color" 459 459 + , "text-sm" 460 460 + , "font-semibold" 461 461 + , "leading-snug" 462 462 + , "pb-1" 459 463 ] 460 464 [ text m ]

+45 -47

src/Applications/UI/View.elm

reviewed

··· 5 5 import Chunky exposing (..) 6 6 import Conditional exposing (..) 7 7 import ContextMenu exposing (ContextMenu) 8 8 - import Css.Classes as C 9 8 import Html exposing (Html, section) 10 10 - import Html.Attributes exposing (style) 9 9 + import Html.Attributes exposing (class, style) 11 10 import Html.Events exposing (on) 12 11 import Html.Events.Extra.Pointer as Pointer 13 12 import Html.Lazy as Lazy ··· 60 59 ] 61 60 62 61 else if model.isDragging then 63 63 - [ C.dragging_something 62 62 + [ class "dragging-something" 64 63 , on "mouseup" (Json.Decode.succeed StoppedDragging) 65 64 , on "touchcancel" (Json.Decode.succeed StoppedDragging) 66 65 , on "touchend" (Json.Decode.succeed StoppedDragging) ··· 114 113 content 115 114 { opts | justifyCenter = True } 116 115 [ loadingAnimation 117 117 - , Html.div 118 118 - [ C.italic 119 119 - , C.mt_5 120 120 - , C.text_white 121 121 - , C.text_opacity_30 116 116 + , chunk 117 117 + [ "italic" 118 118 + , "mt-5" 119 119 + , "text-white" 120 120 + , "text-opacity-30" 122 121 ] 123 122 [ case model.authentication of 124 123 Authentication.Authenticated _ -> ··· 223 222 , on "focusin" inputFocusDecoder 224 223 , style "height" "calc(var(--vh, 1vh) * 100)" 225 224 ] 226 226 - [ C.overflow_x_hidden 227 227 - , C.relative 228 228 - , C.scrolling_touch 229 229 - , C.w_screen 230 230 - , C.z_10 225 225 + [ "overflow-x-hidden" 226 226 + , "relative" 227 227 + , "scrolling-touch" 228 228 + , "w-screen" 229 229 + , "z-10" 231 230 232 231 -- 233 233 - , ifThenElse scrolling C.overflow_y_auto C.overflow_y_hidden 232 232 + , ifThenElse scrolling "overflow-y-auto" "overflow-y-hidden" 234 233 ] 235 234 [ brick 236 235 [ style "min-width" "280px" ] 237 237 - [ C.flex 238 238 - , C.flex_col 239 239 - , C.items_center 240 240 - , C.h_full 241 241 - , C.px_3 236 236 + [ "flex" 237 237 + , "flex-col" 238 238 + , "items-center" 239 239 + , "h-full" 240 240 + , "px-3" 242 241 243 242 -- 244 244 - , C.md__px_8 245 245 - , C.lg__px_16 243 243 + , "md:px-8" 244 244 + , "lg:px-16" 246 245 247 246 -- 248 248 - , ifThenElse justifyCenter C.justify_center C.justify_start 247 247 + , ifThenElse justifyCenter "justify-center" "justify-start" 249 248 ] 250 249 nodes 251 250 ] ··· 282 281 in 283 282 brick 284 283 [] 285 285 - [ C.inset_0 286 286 - , C.bg_black 287 287 - , C.duration_1000 288 288 - , C.ease_in_out 289 289 - , C.fixed 290 290 - , C.transition 291 291 - , C.transition_opacity 292 292 - , C.z_30 284 284 + [ "inset-0" 285 285 + , "bg-black" 286 286 + , "duration-1000" 287 287 + , "ease-in-out" 288 288 + , "fixed" 289 289 + , "transition-opacity" 290 290 + , "z-30" 293 291 294 292 -- 295 295 - , ifThenElse isShown C.pointer_events_auto C.pointer_events_none 296 296 - , ifThenElse isShown C.opacity_40 C.opacity_0 293 293 + , ifThenElse isShown "pointer-events-auto" "pointer-events-none" 294 294 + , ifThenElse isShown "opacity-40" "opacity-0" 297 295 ] 298 296 [] 299 297 ··· 303 301 (>>) 304 302 (brick 305 303 [ style "-webkit-mask-image" "-webkit-radial-gradient(white, black)" ] 306 306 - [ C.bg_white 307 307 - , C.flex 308 308 - , C.flex_col 309 309 - , C.flex_grow 310 310 - , C.overflow_hidden 311 311 - , C.relative 312 312 - , C.rounded 304 304 + [ "bg-white" 305 305 + , "flex" 306 306 + , "flex-col" 307 307 + , "flex-grow" 308 308 + , "overflow-hidden" 309 309 + , "relative" 310 310 + , "rounded" 313 311 314 312 -- Dark mode 315 313 ------------ 316 316 - , C.dark__bg_darkest_hour 314 314 + , "dark:bg-darkest-hour" 317 315 ] 318 316 ) 319 317 (bricky 320 318 [ style "min-height" "296px" ] 321 321 - [ C.flex 322 322 - , C.flex_grow 323 323 - , C.rounded 324 324 - , C.shadow_lg 325 325 - , C.w_full 319 319 + [ "flex" 320 320 + , "flex-grow" 321 321 + , "rounded" 322 322 + , "shadow-lg" 323 323 + , "w-full" 326 324 327 325 -- 328 328 - , C.lg__max_w_insulation 329 329 - , C.lg__min_w_3xl 326 326 + , "lg:max-w-insulation" 327 327 + , "lg:min-w-3xl" 330 328 ] 331 329 )

+16

src/Css/Application.css

reviewed

··· 15 15 16 16 17 17 18 18 + /* 🛠 19 19 + ----- */ 20 20 + 21 21 + @layer utilities { 22 22 + @responsive { 23 23 + .scrolling-touch { 24 24 + -webkit-overflow-scrolling: touch; 25 25 + } 26 26 + .scrolling-auto { 27 27 + -webkit-overflow-scrolling: auto; 28 28 + } 29 29 + } 30 30 + } 31 31 + 32 32 + 33 33 + 18 34 /* Base 19 35 ---- */ 20 36

+9 -11

src/Library/Chunky.elm

reviewed

··· 7 7 -} 8 8 9 9 import Html exposing (Html) 10 10 + import Html.Attributes as A 10 11 11 12 12 13 ··· 16 17 slab : 17 18 (List (Html.Attribute msg) -> List (Html msg) -> Html msg) 18 19 -> List (Html.Attribute msg) 19 19 - -> List (Html.Attribute msg) 20 20 + -> List String 20 21 -> List (Html msg) 21 22 -> Html msg 22 23 slab typ attributes stylingAttributes children = 23 24 typ 24 24 - (List.append 25 25 - stylingAttributes 26 26 - attributes 27 27 - ) 25 25 + (A.class (String.join " " stylingAttributes) :: attributes) 28 26 children 29 27 30 28 31 29 slaby : 32 30 (List (Html.Attribute msg) -> List (Html msg) -> Html msg) 33 31 -> List (Html.Attribute msg) 34 34 - -> List (Html.Attribute msg) 32 32 + -> List String 35 33 -> Html msg 36 34 -> Html msg 37 35 slaby a b c = ··· 42 40 -- 2 43 41 44 42 45 45 - brick : List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (Html msg) -> Html msg 43 43 + brick : List (Html.Attribute msg) -> List String -> List (Html msg) -> Html msg 46 44 brick = 47 45 slab Html.div 48 46 49 47 50 50 - bricky : List (Html.Attribute msg) -> List (Html.Attribute msg) -> Html msg -> Html msg 48 48 + bricky : List (Html.Attribute msg) -> List String -> Html msg -> Html msg 51 49 bricky a b = 52 50 List.singleton >> brick a b 53 51 ··· 56 54 -- 3 57 55 58 56 59 59 - chunk : List (Html.Attribute msg) -> List (Html msg) -> Html msg 57 57 + chunk : List String -> List (Html msg) -> Html msg 60 58 chunk = 61 59 brick [] 62 60 63 61 64 64 - chunky : List (Html.Attribute msg) -> Html msg -> Html msg 62 62 + chunky : List String -> Html msg -> Html msg 65 63 chunky a = 66 64 List.singleton >> chunk a 67 65 68 66 69 69 - inline : List (Html.Attribute msg) -> List (Html msg) -> Html msg 67 67 + inline : List String -> List (Html msg) -> Html msg 70 68 inline = 71 69 slab Html.span [] 72 70

+1 -1

src/Library/Icons.elm

reviewed

··· 18 18 -- 🔱 19 19 20 20 21 21 - wrapped : List (Html.Attribute msg) -> Icon msg -> Int -> Coloring -> VirtualDom.Node msg 21 21 + wrapped : List String -> Icon msg -> Int -> Coloring -> VirtualDom.Node msg 22 22 wrapped classes icon size coloring = 23 23 coloring 24 24 |> icon size

+8 -9

src/Library/Notifications.elm

reviewed

··· 1 1 module Notifications exposing (Action, Kind(..), Notification, Options, casual, contents, dismiss, error, errorWithCode, id, kind, options, stickyCasual, stickyError, stickySuccess, success) 2 2 3 3 import Chunky exposing (..) 4 4 - import Css.Classes as C 5 4 import Html exposing (Html) 6 5 import Markdown 7 6 import Murmur3 exposing (..) ··· 104 103 105 104 else 106 105 chunk 107 107 - [ C.bg_black_50 108 108 - , C.break_all 109 109 - , C.rounded 110 110 - , C.mb_0 111 111 - , C.mt_3 112 112 - , C.p_2 113 113 - , C.text_xxs 106 106 + [ "bg-black-50" 107 107 + , "break-all" 108 108 + , "rounded" 109 109 + , "mb-0" 110 110 + , "mt-3" 111 111 + , "p-2" 112 112 + , "text-xxs" 114 113 ] 115 114 [ slab 116 115 Html.code 117 116 [] 118 118 - [ C.align_middle ] 117 117 + [ "align-middle" ] 119 118 [ Html.text code ] 120 119 ] 121 120 ]

+9

system/Css/PostCSS.js

reviewed

··· 1 1 + module.exports = { 2 2 + plugins: { 3 3 + // NOTE: Order matters here 4 4 + "postcss-import": {}, 5 5 + "postcss-custom-properties": {}, 6 6 + tailwindcss: {}, 7 7 + autoprefixer: {}, 8 8 + }, 9 9 + }