brut 0.17.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (1104) hide show
  1. checksums.yaml +4 -4
  2. data/exe/brut +34 -0
  3. data/lib/brut/cli/apps/build_assets.rb +78 -48
  4. data/lib/brut/cli/apps/db.rb +168 -202
  5. data/lib/brut/cli/apps/deploy.rb +291 -0
  6. data/lib/brut/cli/apps/heroku_container_based_deploy.rb +6 -0
  7. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/add_segment.rb +5 -5
  8. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/add_segment_options.rb +1 -1
  9. data/lib/brut/cli/apps/new/app.rb +240 -0
  10. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/app_id.rb +1 -1
  11. data/lib/brut/cli/apps/new/app_name.rb +29 -0
  12. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/base.rb +9 -6
  13. data/lib/brut/cli/apps/new/erb_binding_delegate.rb +23 -0
  14. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/internet_identifier.rb +5 -5
  15. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/invalid_identifier.rb +1 -1
  16. data/{mkbrut/lib/mkbrut/app.rb → lib/brut/cli/apps/new/old_app.rb} +8 -11
  17. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/add_css_import.rb +1 -1
  18. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/add_i18n_message.rb +1 -1
  19. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/add_method.rb +1 -1
  20. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/append_to_file.rb +1 -1
  21. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/base_op.rb +3 -3
  22. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/copy_file.rb +1 -1
  23. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/insert_code_in_method.rb +1 -1
  24. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/insert_into_file.rb +1 -1
  25. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/insert_route.rb +1 -1
  26. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/mkdir.rb +1 -1
  27. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/prism_parsing_op.rb +1 -1
  28. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/render_template.rb +1 -1
  29. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/skip_file.rb +1 -1
  30. data/lib/brut/cli/apps/new/ops.rb +17 -0
  31. data/lib/brut/cli/apps/new/organization.rb +5 -0
  32. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/prefix.rb +1 -1
  33. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/segments/bare_bones.rb +12 -11
  34. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/segments/demo.rb +16 -15
  35. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/segments/heroku.rb +9 -5
  36. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/segments/sidekiq.rb +44 -21
  37. data/lib/brut/cli/apps/new/segments.rb +8 -0
  38. data/lib/brut/cli/apps/new/version.rb +3 -0
  39. data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/versions.rb +2 -2
  40. data/lib/brut/cli/apps/new.rb +26 -0
  41. data/lib/brut/cli/apps/scaffold.rb +150 -141
  42. data/lib/brut/cli/apps/test.rb +92 -68
  43. data/lib/brut/cli/commands/base_command.rb +174 -0
  44. data/lib/brut/cli/commands/compound_command.rb +29 -0
  45. data/lib/brut/cli/commands/execution_context.rb +32 -0
  46. data/lib/brut/cli/commands/help.rb +26 -0
  47. data/lib/brut/cli/commands/output_error.rb +13 -0
  48. data/lib/brut/cli/commands/raise_error.rb +11 -0
  49. data/lib/brut/cli/commands.rb +8 -0
  50. data/lib/brut/cli/execute_result.rb +39 -0
  51. data/lib/brut/cli/executor.rb +9 -4
  52. data/lib/brut/cli/output.rb +13 -0
  53. data/lib/brut/cli/parsed_command_line.rb +143 -0
  54. data/lib/brut/cli/runner.rb +124 -0
  55. data/lib/brut/cli.rb +7 -29
  56. data/lib/brut/framework/container.rb +1 -1
  57. data/lib/brut/framework/mcp.rb +59 -13
  58. data/lib/brut/framework/project_environment.rb +3 -1
  59. data/lib/brut/junk_drawer.rb +3 -1
  60. data/lib/brut/spec_support/cli_command_support.rb +45 -0
  61. data/lib/brut/spec_support/e2e_test_server.rb +3 -0
  62. data/lib/brut/spec_support/general_support.rb +1 -1
  63. data/lib/brut/spec_support/matchers/have_executed.rb +35 -0
  64. data/lib/brut/spec_support/rspec_setup.rb +4 -8
  65. data/lib/brut/spec_support.rb +1 -0
  66. data/lib/brut/tui/markup_string.rb +2 -0
  67. data/lib/brut/tui/script/events/command_std_out.rb +3 -2
  68. data/lib/brut/tui/script/exec_step.rb +11 -4
  69. data/lib/brut/tui/script/puts_subscriber.rb +4 -4
  70. data/lib/brut/tui/script.rb +7 -3
  71. data/lib/brut/tui/terminal_theme.rb +15 -11
  72. data/lib/brut/version.rb +1 -1
  73. data/templates/Base/.env.development.local +2 -0
  74. data/templates/Base/bin/ci +42 -0
  75. data/{mkbrut/templates → templates}/Base/bin/release +2 -2
  76. data/templates/Base/bin/setup +174 -0
  77. data/{mkbrut/templates → templates}/Base/bin/watch-and-build-assets +1 -1
  78. data/{mkbrut/templates → templates}/Base/dx/docker-compose.env.erb +1 -1
  79. data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/css/fonts.css +1 -1
  80. data/{mkbrut/templates → templates}/segments/Heroku/deploy/Dockerfile +2 -2
  81. data/templates/segments/Heroku/deploy/docker_config.rb +30 -0
  82. metadata +191 -1055
  83. data/.gitignore +0 -61
  84. data/.projections.json +0 -10
  85. data/CHANGELOG.md +0 -172
  86. data/CODE_OF_CONDUCT.txt +0 -99
  87. data/Dockerfile.dx +0 -82
  88. data/Gemfile +0 -6
  89. data/Gemfile.lock +0 -246
  90. data/LICENSE.txt +0 -370
  91. data/README.md +0 -90
  92. data/Rakefile +0 -25
  93. data/assets/Logo-Square.pxd +0 -0
  94. data/assets/LogoPylon.pxd +0 -0
  95. data/assets/LogoStop.pxd +0 -0
  96. data/assets/LogoTall.pxd +0 -0
  97. data/assets/MetroIcon.graffle +0 -0
  98. data/assets/MetroLogo.graffle +0 -0
  99. data/assets/SocialImage.png +0 -0
  100. data/assets/SocialImage.pxd +0 -0
  101. data/assets/YouTubeThumb.pxd +0 -0
  102. data/bin/bin_kit.rb +0 -51
  103. data/bin/build +0 -86
  104. data/bin/ci +0 -40
  105. data/bin/dev +0 -20
  106. data/bin/docs +0 -86
  107. data/bin/generate-and-run-rubocop +0 -52
  108. data/bin/new-version +0 -8
  109. data/bin/publish +0 -61
  110. data/bin/rake +0 -27
  111. data/bin/rspec +0 -27
  112. data/bin/rubocop +0 -27
  113. data/bin/setup +0 -252
  114. data/bin/test +0 -18
  115. data/brut-css/.nvim.lua +0 -1
  116. data/brut-css/README.md +0 -28
  117. data/brut-css/bin/build +0 -50
  118. data/brut-css/bin/ci +0 -19
  119. data/brut-css/bin/dev +0 -1
  120. data/brut-css/bin/docs +0 -34
  121. data/brut-css/bin/publish +0 -21
  122. data/brut-css/bin/setup +0 -6
  123. data/brut-css/config/media-queries-all.css +0 -15
  124. data/brut-css/config/media-queries-minimal.css +0 -5
  125. data/brut-css/config/postcss.config.cjs +0 -7
  126. data/brut-css/config/pseudo-classes-all.css +0 -9
  127. data/brut-css/dx +0 -1
  128. data/brut-css/package-lock.json +0 -3165
  129. data/brut-css/package.json +0 -36
  130. data/brut-css/src/css/appearance.css +0 -145
  131. data/brut-css/src/css/border.css +0 -522
  132. data/brut-css/src/css/colors.css +0 -3502
  133. data/brut-css/src/css/dimensions.css +0 -548
  134. data/brut-css/src/css/flex.css +0 -179
  135. data/brut-css/src/css/index.css +0 -13
  136. data/brut-css/src/css/layout.css +0 -120
  137. data/brut-css/src/css/list.css +0 -41
  138. data/brut-css/src/css/positioning.css +0 -354
  139. data/brut-css/src/css/properties/colors.css +0 -455
  140. data/brut-css/src/css/properties/index.css +0 -3
  141. data/brut-css/src/css/properties/spacing.css +0 -140
  142. data/brut-css/src/css/properties/typography.css +0 -224
  143. data/brut-css/src/css/reset.css +0 -107
  144. data/brut-css/src/css/spacing.css +0 -585
  145. data/brut-css/src/css/typography.css +0 -519
  146. data/brut-css/src/css/utils.css +0 -104
  147. data/brut-css/src/docs/1_getting-started/1_overview.md +0 -46
  148. data/brut-css/src/docs/1_getting-started/2_installation.md +0 -25
  149. data/brut-css/src/docs/1_getting-started/3_core-concepts.md +0 -75
  150. data/brut-css/src/docs/1_getting-started/4_simple-example.md +0 -132
  151. data/brut-css/src/docs/1_getting-started/page.html.ejs +0 -10
  152. data/brut-css/src/docs/2_properties/page.html.ejs +0 -71
  153. data/brut-css/src/docs/3_classes/color-demo.html.ejs +0 -31
  154. data/brut-css/src/docs/3_classes/page.html.ejs +0 -87
  155. data/brut-css/src/docs/4_customization/1_design-system.md +0 -36
  156. data/brut-css/src/docs/4_customization/2_breakpoints.md +0 -75
  157. data/brut-css/src/docs/4_customization/3_pseudo-classes.md +0 -74
  158. data/brut-css/src/docs/4_customization/4_advanced-configuration.md +0 -40
  159. data/brut-css/src/docs/4_customization/page.html.ejs +0 -10
  160. data/brut-css/src/docs/docs.css +0 -98
  161. data/brut-css/src/docs/includes/body-and-header.html.ejs +0 -30
  162. data/brut-css/src/docs/includes/footer-and-rest.html.ejs +0 -9
  163. data/brut-css/src/docs/includes/head.html.ejs +0 -5
  164. data/brut-css/src/docs/includes/nav.html.ejs +0 -10
  165. data/brut-css/src/docs/index.html.ejs +0 -32
  166. data/brut-css/src/docs/prism-twilight.min.css +0 -1
  167. data/brut-css/src/js/Logger.js +0 -71
  168. data/brut-css/src/js/build.js +0 -111
  169. data/brut-css/src/js/cli/CLIArgError.js +0 -7
  170. data/brut-css/src/js/cli/Debug.js +0 -27
  171. data/brut-css/src/js/cli/DocsDir.js +0 -16
  172. data/brut-css/src/js/cli/DocsTemplateSourceDir.js +0 -16
  173. data/brut-css/src/js/cli/InputFile.js +0 -31
  174. data/brut-css/src/js/cli/MediaQueryConfigFile.js +0 -10
  175. data/brut-css/src/js/cli/OutputFile.js +0 -22
  176. data/brut-css/src/js/cli/ParsedArg.js +0 -17
  177. data/brut-css/src/js/cli/PathToBrutCSSRoot.js +0 -19
  178. data/brut-css/src/js/cli/PseudoClassConfigFile.js +0 -11
  179. data/brut-css/src/js/cli.js +0 -108
  180. data/brut-css/src/js/docGenerator.js +0 -467
  181. data/brut-css/src/js/mediaQueryConfigParser.js +0 -98
  182. data/brut-css/src/js/post-css-plugins/addMediaQueriesPlugin.js +0 -49
  183. data/brut-css/src/js/post-css-plugins/addPseudoClassesPlugin.js +0 -42
  184. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Category.js +0 -9
  185. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/DocState.js +0 -185
  186. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Documentable.js +0 -8
  187. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Group.js +0 -7
  188. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/ParsedComment.js +0 -73
  189. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Property.js +0 -9
  190. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyCategory.js +0 -4
  191. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyGroup.js +0 -8
  192. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Rule.js +0 -12
  193. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleCategory.js +0 -4
  194. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleGroup.js +0 -8
  195. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeRef.js +0 -5
  196. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeURL.js +0 -9
  197. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin.js +0 -49
  198. data/brut-css/src/js/post-css-plugins/generateRootCustomPropertiesPlugin.js +0 -45
  199. data/brut-css/src/js/pseudoClassConfigParser.js +0 -145
  200. data/brut-js/.projections.json +0 -10
  201. data/brut-js/README.md +0 -118
  202. data/brut-js/bin/build +0 -19
  203. data/brut-js/bin/ci +0 -5
  204. data/brut-js/bin/docs +0 -25
  205. data/brut-js/bin/publish +0 -21
  206. data/brut-js/bin/setup +0 -6
  207. data/brut-js/docs/README.md +0 -8
  208. data/brut-js/docs/jsdoc-plugins/customElementTag.js +0 -8
  209. data/brut-js/docs/jsdoc-theme/publish.js +0 -692
  210. data/brut-js/docs/jsdoc-theme/static/scripts/linenumber.js +0 -25
  211. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/Apache-License-2.0.txt +0 -202
  212. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/lang-css.js +0 -2
  213. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/prettify.js +0 -28
  214. data/brut-js/docs/jsdoc-theme/static/styles/jsdoc-default.css +0 -327
  215. data/brut-js/docs/jsdoc-theme/static/styles/prettify-jsdoc.css +0 -111
  216. data/brut-js/docs/jsdoc-theme/static/styles/prettify-tomorrow.css +0 -132
  217. data/brut-js/docs/jsdoc-theme/tmpl/augments.tmpl +0 -10
  218. data/brut-js/docs/jsdoc-theme/tmpl/container.tmpl +0 -199
  219. data/brut-js/docs/jsdoc-theme/tmpl/details.tmpl +0 -143
  220. data/brut-js/docs/jsdoc-theme/tmpl/example.tmpl +0 -2
  221. data/brut-js/docs/jsdoc-theme/tmpl/examples.tmpl +0 -13
  222. data/brut-js/docs/jsdoc-theme/tmpl/exceptions.tmpl +0 -32
  223. data/brut-js/docs/jsdoc-theme/tmpl/layout.tmpl +0 -38
  224. data/brut-js/docs/jsdoc-theme/tmpl/mainpage.tmpl +0 -14
  225. data/brut-js/docs/jsdoc-theme/tmpl/members.tmpl +0 -38
  226. data/brut-js/docs/jsdoc-theme/tmpl/method.tmpl +0 -131
  227. data/brut-js/docs/jsdoc-theme/tmpl/modifies.tmpl +0 -14
  228. data/brut-js/docs/jsdoc-theme/tmpl/params.tmpl +0 -131
  229. data/brut-js/docs/jsdoc-theme/tmpl/properties.tmpl +0 -108
  230. data/brut-js/docs/jsdoc-theme/tmpl/returns.tmpl +0 -19
  231. data/brut-js/docs/jsdoc-theme/tmpl/source.tmpl +0 -8
  232. data/brut-js/docs/jsdoc-theme/tmpl/tutorial.tmpl +0 -19
  233. data/brut-js/docs/jsdoc-theme/tmpl/type.tmpl +0 -7
  234. data/brut-js/docs/jsdoc.config.json +0 -23
  235. data/brut-js/docs/package-lock.json +0 -343
  236. data/brut-js/docs/package.json +0 -7
  237. data/brut-js/dx +0 -1
  238. data/brut-js/package-lock.json +0 -2210
  239. data/brut-js/package.json +0 -36
  240. data/brut-js/specs/AjaxSubmit.spec.js +0 -453
  241. data/brut-js/specs/Autosubmit.spec.js +0 -127
  242. data/brut-js/specs/ConfirmSubmit.spec.js +0 -224
  243. data/brut-js/specs/ConstraintViolationMessage.spec.js +0 -33
  244. data/brut-js/specs/ConstraintViolationMessages.spec.js +0 -32
  245. data/brut-js/specs/CopyToClipboard.spec.js +0 -35
  246. data/brut-js/specs/Form.spec.js +0 -137
  247. data/brut-js/specs/I18nTranslation.spec.js +0 -19
  248. data/brut-js/specs/LocaleDetection.spec.js +0 -22
  249. data/brut-js/specs/Message.spec.js +0 -15
  250. data/brut-js/specs/SpecHelper.js +0 -23
  251. data/brut-js/specs/Tabs.spec.js +0 -41
  252. data/brut-js/specs/Toast.spec.js +0 -34
  253. data/brut-js/specs/config/asset_metadata.json +0 -7
  254. data/brut-js/src/AjaxSubmit.js +0 -499
  255. data/brut-js/src/Autosubmit.js +0 -63
  256. data/brut-js/src/BaseCustomElement.js +0 -261
  257. data/brut-js/src/ConfirmSubmit.js +0 -137
  258. data/brut-js/src/ConfirmationDialog.js +0 -143
  259. data/brut-js/src/ConstraintViolationMessage.js +0 -140
  260. data/brut-js/src/ConstraintViolationMessages.js +0 -98
  261. data/brut-js/src/CopyToClipboard.js +0 -96
  262. data/brut-js/src/Form.js +0 -147
  263. data/brut-js/src/I18nTranslation.js +0 -64
  264. data/brut-js/src/LocaleDetection.js +0 -117
  265. data/brut-js/src/Logger.js +0 -90
  266. data/brut-js/src/Message.js +0 -62
  267. data/brut-js/src/RichString.js +0 -116
  268. data/brut-js/src/Tabs.js +0 -168
  269. data/brut-js/src/Toast.js +0 -102
  270. data/brut-js/src/Tracing.js +0 -247
  271. data/brut-js/src/appForTestingOnly.js +0 -15
  272. data/brut-js/src/index.js +0 -133
  273. data/brut-js/src/testing/AssetMetadata.js +0 -35
  274. data/brut-js/src/testing/AssetMetadataLoader.js +0 -25
  275. data/brut-js/src/testing/CustomElementTest.js +0 -235
  276. data/brut-js/src/testing/DOMCreator.js +0 -45
  277. data/brut-js/src/testing/index.js +0 -48
  278. data/brut.gemspec +0 -73
  279. data/brutrb.com/.vitepress/config.mjs +0 -164
  280. data/brutrb.com/.vitepress/plugins/jsdocLinker.js +0 -34
  281. data/brutrb.com/.vitepress/plugins/rdocLinker.js +0 -18
  282. data/brutrb.com/.vitepress/theme/custom.css +0 -14
  283. data/brutrb.com/.vitepress/theme/index.js +0 -18
  284. data/brutrb.com/.vitepress/theme/style.css +0 -139
  285. data/brutrb.com/adrs.md +0 -16
  286. data/brutrb.com/ai.md +0 -68
  287. data/brutrb.com/assets.md +0 -131
  288. data/brutrb.com/bin/build +0 -5
  289. data/brutrb.com/bin/deploy +0 -7
  290. data/brutrb.com/bin/dev +0 -5
  291. data/brutrb.com/bin/setup +0 -6
  292. data/brutrb.com/brut-js.md +0 -128
  293. data/brutrb.com/business-logic.md +0 -55
  294. data/brutrb.com/cli.md +0 -274
  295. data/brutrb.com/components.md +0 -265
  296. data/brutrb.com/configuration.md +0 -256
  297. data/brutrb.com/css.md +0 -103
  298. data/brutrb.com/custom-element-tests.md +0 -148
  299. data/brutrb.com/database-access.md +0 -201
  300. data/brutrb.com/database-schema.md +0 -320
  301. data/brutrb.com/deployment.md +0 -158
  302. data/brutrb.com/dev-environment.md +0 -186
  303. data/brutrb.com/dir-structure.md +0 -120
  304. data/brutrb.com/doc-conventions.md +0 -41
  305. data/brutrb.com/dx +0 -1
  306. data/brutrb.com/end-to-end-tests.md +0 -176
  307. data/brutrb.com/features.md +0 -373
  308. data/brutrb.com/flash-and-session.md +0 -208
  309. data/brutrb.com/form-constraints.md +0 -266
  310. data/brutrb.com/forms.md +0 -238
  311. data/brutrb.com/getting-started.md +0 -142
  312. data/brutrb.com/handlers.md +0 -177
  313. data/brutrb.com/hooks.md +0 -176
  314. data/brutrb.com/i18n.md +0 -190
  315. data/brutrb.com/images/DevEnvironment.graffle +0 -0
  316. data/brutrb.com/images/DevEnvironment.png +0 -0
  317. data/brutrb.com/images/LogoSquare.png +0 -0
  318. data/brutrb.com/images/LogoStop.png +0 -0
  319. data/brutrb.com/images/LogoTall.png +0 -0
  320. data/brutrb.com/images/Makefile +0 -10
  321. data/brutrb.com/images/OverviewMetro.graffle +0 -0
  322. data/brutrb.com/images/OverviewMetro.png +0 -0
  323. data/brutrb.com/images/dev-env-overview.dot +0 -54
  324. data/brutrb.com/images/dev-env-overview.png +0 -0
  325. data/brutrb.com/images/dev-env-protocol.dot +0 -37
  326. data/brutrb.com/images/dev-env-protocol.png +0 -0
  327. data/brutrb.com/images/overview.graffle +0 -0
  328. data/brutrb.com/images/overview.png +0 -0
  329. data/brutrb.com/images/spa.dot +0 -19
  330. data/brutrb.com/images/spa.png +0 -0
  331. data/brutrb.com/images/tutorial/02-confirmation-dialog-browser-element-styled.png +0 -0
  332. data/brutrb.com/images/tutorial/02-confirmation-dialog-browser-element.png +0 -0
  333. data/brutrb.com/images/tutorial/02-confirmation-dialog-browser.png +0 -0
  334. data/brutrb.com/images/tutorial/02-confirmation-flow.graffle +0 -0
  335. data/brutrb.com/images/tutorial/02-confirmation-flow.png +0 -0
  336. data/brutrb.com/images/tutorial/basic-form-with-violations.png +0 -0
  337. data/brutrb.com/images/tutorial/basic-form.png +0 -0
  338. data/brutrb.com/images/tutorial/initial-home-page.png +0 -0
  339. data/brutrb.com/images/tutorial/new-post-editor.png +0 -0
  340. data/brutrb.com/images/tutorial/new-post-home-page.png +0 -0
  341. data/brutrb.com/images/tutorial/styled-form-with-server-side-violations.png +0 -0
  342. data/brutrb.com/images/tutorial/styled-form-with-violations.png +0 -0
  343. data/brutrb.com/images/tutorial/styled-home-page-with-posts.png +0 -0
  344. data/brutrb.com/images/tutorial/styled-home-page.png +0 -0
  345. data/brutrb.com/images/tutorial/welcome-to-brut.png +0 -0
  346. data/brutrb.com/images/workspace-protocol.dot +0 -44
  347. data/brutrb.com/images/workspace-protocol.png +0 -0
  348. data/brutrb.com/index.md +0 -34
  349. data/brutrb.com/instrumentation.md +0 -331
  350. data/brutrb.com/javascript.md +0 -122
  351. data/brutrb.com/jobs.md +0 -114
  352. data/brutrb.com/keyword-injection.md +0 -195
  353. data/brutrb.com/layouts.md +0 -156
  354. data/brutrb.com/lsp.md +0 -23
  355. data/brutrb.com/markdown-examples.md +0 -85
  356. data/brutrb.com/middleware.md +0 -80
  357. data/brutrb.com/overview.md +0 -68
  358. data/brutrb.com/package-lock.json +0 -2451
  359. data/brutrb.com/package.json +0 -11
  360. data/brutrb.com/pages.md +0 -290
  361. data/brutrb.com/public/SocialImage.png +0 -0
  362. data/brutrb.com/public/favicon.ico +0 -0
  363. data/brutrb.com/recipes/alternate-layouts.md +0 -32
  364. data/brutrb.com/recipes/authentication.md +0 -336
  365. data/brutrb.com/recipes/custom-flash.md +0 -51
  366. data/brutrb.com/recipes/dev-env-secrets.md +0 -87
  367. data/brutrb.com/recipes/form-errors.md +0 -148
  368. data/brutrb.com/recipes/indexed-forms.md +0 -149
  369. data/brutrb.com/recipes/migrations.md +0 -210
  370. data/brutrb.com/recipes/text-field-component.md +0 -182
  371. data/brutrb.com/roadmap.md +0 -52
  372. data/brutrb.com/routes.md +0 -189
  373. data/brutrb.com/security.md +0 -102
  374. data/brutrb.com/seed-data.md +0 -63
  375. data/brutrb.com/space-time-continuum.md +0 -81
  376. data/brutrb.com/tutorial.md +0 -138
  377. data/brutrb.com/tutorials/01-intro.md +0 -1654
  378. data/brutrb.com/tutorials/02-dialog.md +0 -569
  379. data/brutrb.com/unit-tests.md +0 -148
  380. data/brutrb.com/why.md +0 -19
  381. data/docker-compose.dx.yml +0 -25
  382. data/docs/404.html +0 -26
  383. data/docs/CNAME +0 -1
  384. data/docs/SocialImage.png +0 -0
  385. data/docs/adrs.html +0 -29
  386. data/docs/ai.html +0 -29
  387. data/docs/api/Brut/BackEnd/SeedData.html +0 -493
  388. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server/FlushSpans.html +0 -214
  389. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server.html +0 -125
  390. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares.html +0 -125
  391. data/docs/api/Brut/BackEnd/Sidekiq.html +0 -125
  392. data/docs/api/Brut/BackEnd/Validators/FormValidator.html +0 -414
  393. data/docs/api/Brut/BackEnd/Validators.html +0 -128
  394. data/docs/api/Brut/BackEnd.html +0 -132
  395. data/docs/api/Brut/CLI/App.html +0 -1601
  396. data/docs/api/Brut/CLI/AppRunner.html +0 -491
  397. data/docs/api/Brut/CLI/Apps/BuildAssets/All.html +0 -264
  398. data/docs/api/Brut/CLI/Apps/BuildAssets/CSS.html +0 -306
  399. data/docs/api/Brut/CLI/Apps/BuildAssets/Images.html +0 -262
  400. data/docs/api/Brut/CLI/Apps/BuildAssets/JS.html +0 -314
  401. data/docs/api/Brut/CLI/Apps/BuildAssets.html +0 -183
  402. data/docs/api/Brut/CLI/Apps/DB/Create.html +0 -365
  403. data/docs/api/Brut/CLI/Apps/DB/Drop.html +0 -357
  404. data/docs/api/Brut/CLI/Apps/DB/Migrate.html +0 -389
  405. data/docs/api/Brut/CLI/Apps/DB/NewMigration.html +0 -339
  406. data/docs/api/Brut/CLI/Apps/DB/Rebuild.html +0 -329
  407. data/docs/api/Brut/CLI/Apps/DB/Seed.html +0 -347
  408. data/docs/api/Brut/CLI/Apps/DB/Status.html +0 -383
  409. data/docs/api/Brut/CLI/Apps/DB.html +0 -183
  410. data/docs/api/Brut/CLI/Apps/DeployBase/GitChecks.html +0 -270
  411. data/docs/api/Brut/CLI/Apps/DeployBase.html +0 -257
  412. data/docs/api/Brut/CLI/Apps/HerokuContainerBasedDeploy/Deploy.html +0 -587
  413. data/docs/api/Brut/CLI/Apps/HerokuContainerBasedDeploy.html +0 -196
  414. data/docs/api/Brut/CLI/Apps/Scaffold/Action/Route.html +0 -303
  415. data/docs/api/Brut/CLI/Apps/Scaffold/Action.html +0 -508
  416. data/docs/api/Brut/CLI/Apps/Scaffold/Component.html +0 -398
  417. data/docs/api/Brut/CLI/Apps/Scaffold/CustomElementTest.html +0 -374
  418. data/docs/api/Brut/CLI/Apps/Scaffold/DbModel.html +0 -384
  419. data/docs/api/Brut/CLI/Apps/Scaffold/E2ETest.html +0 -410
  420. data/docs/api/Brut/CLI/Apps/Scaffold/Form.html +0 -262
  421. data/docs/api/Brut/CLI/Apps/Scaffold/Page/Route.html +0 -303
  422. data/docs/api/Brut/CLI/Apps/Scaffold/Page.html +0 -480
  423. data/docs/api/Brut/CLI/Apps/Scaffold/RoutesEditor.html +0 -450
  424. data/docs/api/Brut/CLI/Apps/Scaffold/Test.html +0 -380
  425. data/docs/api/Brut/CLI/Apps/Scaffold.html +0 -253
  426. data/docs/api/Brut/CLI/Apps/Test/Audit.html +0 -474
  427. data/docs/api/Brut/CLI/Apps/Test/E2e.html +0 -407
  428. data/docs/api/Brut/CLI/Apps/Test/JS.html +0 -262
  429. data/docs/api/Brut/CLI/Apps/Test/Run.html +0 -578
  430. data/docs/api/Brut/CLI/Apps/Test.html +0 -253
  431. data/docs/api/Brut/CLI/Apps.html +0 -125
  432. data/docs/api/Brut/CLI/Command.html +0 -2425
  433. data/docs/api/Brut/CLI/Error.html +0 -139
  434. data/docs/api/Brut/CLI/ExecutionResults/Result.html +0 -664
  435. data/docs/api/Brut/CLI/ExecutionResults.html +0 -675
  436. data/docs/api/Brut/CLI/Executor.html +0 -561
  437. data/docs/api/Brut/CLI/InvalidOption.html +0 -245
  438. data/docs/api/Brut/CLI/Options.html +0 -880
  439. data/docs/api/Brut/CLI/Output.html +0 -699
  440. data/docs/api/Brut/CLI/SystemExecError.html +0 -451
  441. data/docs/api/Brut/CLI.html +0 -263
  442. data/docs/api/Brut/FactoryBot.html +0 -225
  443. data/docs/api/Brut/Framework/App.html +0 -1097
  444. data/docs/api/Brut/Framework/Config.html +0 -1071
  445. data/docs/api/Brut/Framework/Container.html +0 -1464
  446. data/docs/api/Brut/Framework/Error.html +0 -140
  447. data/docs/api/Brut/Framework/Errors/AbstractMethod.html +0 -232
  448. data/docs/api/Brut/Framework/Errors/Bug.html +0 -234
  449. data/docs/api/Brut/Framework/Errors/MissingConfiguration.html +0 -257
  450. data/docs/api/Brut/Framework/Errors/MissingParameter.html +0 -273
  451. data/docs/api/Brut/Framework/Errors/NoClassForPath.html +0 -471
  452. data/docs/api/Brut/Framework/Errors/NotFound.html +0 -308
  453. data/docs/api/Brut/Framework/Errors/NotImplemented.html +0 -234
  454. data/docs/api/Brut/Framework/Errors.html +0 -351
  455. data/docs/api/Brut/Framework/FussyTypeEnforcement.html +0 -392
  456. data/docs/api/Brut/Framework/MCP.html +0 -871
  457. data/docs/api/Brut/Framework/ProjectEnvironment.html +0 -648
  458. data/docs/api/Brut/Framework.html +0 -129
  459. data/docs/api/Brut/FrontEnd/AssetPathResolver.html +0 -317
  460. data/docs/api/Brut/FrontEnd/Component/Helpers.html +0 -420
  461. data/docs/api/Brut/FrontEnd/Component.html +0 -434
  462. data/docs/api/Brut/FrontEnd/Components/ConstraintViolations.html +0 -491
  463. data/docs/api/Brut/FrontEnd/Components/FormTag.html +0 -526
  464. data/docs/api/Brut/FrontEnd/Components/I18nTranslations.html +0 -313
  465. data/docs/api/Brut/FrontEnd/Components/Input.html +0 -195
  466. data/docs/api/Brut/FrontEnd/Components/Inputs/ButtonTag.html +0 -447
  467. data/docs/api/Brut/FrontEnd/Components/Inputs/CsrfToken.html +0 -339
  468. data/docs/api/Brut/FrontEnd/Components/Inputs/InputTag.html +0 -568
  469. data/docs/api/Brut/FrontEnd/Components/Inputs/RadioButton.html +0 -419
  470. data/docs/api/Brut/FrontEnd/Components/Inputs/SelectTagWithOptions.html +0 -610
  471. data/docs/api/Brut/FrontEnd/Components/Inputs/TextareaTag.html +0 -534
  472. data/docs/api/Brut/FrontEnd/Components/Inputs.html +0 -125
  473. data/docs/api/Brut/FrontEnd/Components/LocaleDetection.html +0 -367
  474. data/docs/api/Brut/FrontEnd/Components/PageIdentifier.html +0 -355
  475. data/docs/api/Brut/FrontEnd/Components/TimeTag.html +0 -655
  476. data/docs/api/Brut/FrontEnd/Components/Traceparent.html +0 -352
  477. data/docs/api/Brut/FrontEnd/Components.html +0 -156
  478. data/docs/api/Brut/FrontEnd/CsrfProtector.html +0 -250
  479. data/docs/api/Brut/FrontEnd/Download.html +0 -467
  480. data/docs/api/Brut/FrontEnd/Flash.html +0 -1150
  481. data/docs/api/Brut/FrontEnd/Form.html +0 -1227
  482. data/docs/api/Brut/FrontEnd/Forms/Button.html +0 -331
  483. data/docs/api/Brut/FrontEnd/Forms/ButtonInputDefinition.html +0 -537
  484. data/docs/api/Brut/FrontEnd/Forms/ConstraintViolation.html +0 -590
  485. data/docs/api/Brut/FrontEnd/Forms/Input/Color.html +0 -201
  486. data/docs/api/Brut/FrontEnd/Forms/Input/TimeOfDay.html +0 -535
  487. data/docs/api/Brut/FrontEnd/Forms/Input.html +0 -1567
  488. data/docs/api/Brut/FrontEnd/Forms/InputDeclarations.html +0 -635
  489. data/docs/api/Brut/FrontEnd/Forms/InputDefinition.html +0 -1336
  490. data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInput.html +0 -730
  491. data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInputDefinition.html +0 -587
  492. data/docs/api/Brut/FrontEnd/Forms/SelectInput.html +0 -734
  493. data/docs/api/Brut/FrontEnd/Forms/SelectInputDefinition.html +0 -582
  494. data/docs/api/Brut/FrontEnd/Forms/ValidityState.html +0 -659
  495. data/docs/api/Brut/FrontEnd/Forms.html +0 -127
  496. data/docs/api/Brut/FrontEnd/GenericResponse.html +0 -377
  497. data/docs/api/Brut/FrontEnd/Handler.html +0 -442
  498. data/docs/api/Brut/FrontEnd/Handlers/CspReportingHandler.html +0 -318
  499. data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler/TraceParent.html +0 -336
  500. data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler.html +0 -399
  501. data/docs/api/Brut/FrontEnd/Handlers/LocaleDetectionHandler.html +0 -354
  502. data/docs/api/Brut/FrontEnd/Handlers/MissingHandler/Form.html +0 -151
  503. data/docs/api/Brut/FrontEnd/Handlers/MissingHandler.html +0 -315
  504. data/docs/api/Brut/FrontEnd/Handlers.html +0 -125
  505. data/docs/api/Brut/FrontEnd/HandlingResults.html +0 -339
  506. data/docs/api/Brut/FrontEnd/HttpMethod.html +0 -661
  507. data/docs/api/Brut/FrontEnd/HttpStatus.html +0 -496
  508. data/docs/api/Brut/FrontEnd/InlineSvgLocator.html +0 -284
  509. data/docs/api/Brut/FrontEnd/Layout.html +0 -486
  510. data/docs/api/Brut/FrontEnd/Middleware.html +0 -135
  511. data/docs/api/Brut/FrontEnd/Middlewares/AnnotateBrutOwnedPaths.html +0 -288
  512. data/docs/api/Brut/FrontEnd/Middlewares/Favicon.html +0 -292
  513. data/docs/api/Brut/FrontEnd/Middlewares/OpenTelemetrySpan.html +0 -324
  514. data/docs/api/Brut/FrontEnd/Middlewares/ReloadApp.html +0 -376
  515. data/docs/api/Brut/FrontEnd/Middlewares.html +0 -125
  516. data/docs/api/Brut/FrontEnd/Page.html +0 -781
  517. data/docs/api/Brut/FrontEnd/Pages/MissingPage.html +0 -797
  518. data/docs/api/Brut/FrontEnd/Pages.html +0 -125
  519. data/docs/api/Brut/FrontEnd/RequestContext.html +0 -1312
  520. data/docs/api/Brut/FrontEnd/RouteHook.html +0 -424
  521. data/docs/api/Brut/FrontEnd/RouteHooks/AgeFlash.html +0 -242
  522. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineScripts.html +0 -249
  523. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts/ReportOnly.html +0 -264
  524. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts.html +0 -261
  525. data/docs/api/Brut/FrontEnd/RouteHooks/LocaleDetection.html +0 -284
  526. data/docs/api/Brut/FrontEnd/RouteHooks/SetupRequestContext.html +0 -252
  527. data/docs/api/Brut/FrontEnd/RouteHooks.html +0 -115
  528. data/docs/api/Brut/FrontEnd/Routing/FormHandlerRoute.html +0 -227
  529. data/docs/api/Brut/FrontEnd/Routing/FormRoute.html +0 -305
  530. data/docs/api/Brut/FrontEnd/Routing/MissingForm.html +0 -324
  531. data/docs/api/Brut/FrontEnd/Routing/MissingHandler.html +0 -319
  532. data/docs/api/Brut/FrontEnd/Routing/MissingPage.html +0 -315
  533. data/docs/api/Brut/FrontEnd/Routing/MissingPath.html +0 -315
  534. data/docs/api/Brut/FrontEnd/Routing/PageRoute.html +0 -327
  535. data/docs/api/Brut/FrontEnd/Routing/Route.html +0 -761
  536. data/docs/api/Brut/FrontEnd/Routing.html +0 -927
  537. data/docs/api/Brut/FrontEnd/Session.html +0 -1195
  538. data/docs/api/Brut/FrontEnd.html +0 -134
  539. data/docs/api/Brut/I18n/BaseMethods.html +0 -931
  540. data/docs/api/Brut/I18n/ForBackEnd.html +0 -302
  541. data/docs/api/Brut/I18n/ForCLI.html +0 -302
  542. data/docs/api/Brut/I18n/ForHTML.html +0 -296
  543. data/docs/api/Brut/I18n/HTTPAcceptLanguage/AlwaysEnglish.html +0 -316
  544. data/docs/api/Brut/I18n/HTTPAcceptLanguage.html +0 -930
  545. data/docs/api/Brut/I18n.html +0 -127
  546. data/docs/api/Brut/Instrumentation/LoggerSpanExporter.html +0 -435
  547. data/docs/api/Brut/Instrumentation/Methods/ClassMethods.html +0 -596
  548. data/docs/api/Brut/Instrumentation/Methods.html +0 -173
  549. data/docs/api/Brut/Instrumentation/OpenTelemetry/NormalizedAttributes.html +0 -286
  550. data/docs/api/Brut/Instrumentation/OpenTelemetry/Span.html +0 -302
  551. data/docs/api/Brut/Instrumentation/OpenTelemetry.html +0 -866
  552. data/docs/api/Brut/Instrumentation.html +0 -128
  553. data/docs/api/Brut/RubocopConfig.html +0 -237
  554. data/docs/api/Brut/SinatraHelpers/ClassMethods.html +0 -534
  555. data/docs/api/Brut/SinatraHelpers.html +0 -281
  556. data/docs/api/Brut/SpecSupport/ClockSupport.html +0 -383
  557. data/docs/api/Brut/SpecSupport/ComponentSupport.html +0 -496
  558. data/docs/api/Brut/SpecSupport/E2ETestServer.html +0 -503
  559. data/docs/api/Brut/SpecSupport/E2eSupport.html +0 -142
  560. data/docs/api/Brut/SpecSupport/EnhancedNode.html +0 -403
  561. data/docs/api/Brut/SpecSupport/FlashSupport.html +0 -278
  562. data/docs/api/Brut/SpecSupport/GeneralSupport/ClassMethods.html +0 -401
  563. data/docs/api/Brut/SpecSupport/GeneralSupport.html +0 -195
  564. data/docs/api/Brut/SpecSupport/HandlerSupport.html +0 -160
  565. data/docs/api/Brut/SpecSupport/Matchers/BeABug.html +0 -142
  566. data/docs/api/Brut/SpecSupport/Matchers/BePageFor.html +0 -142
  567. data/docs/api/Brut/SpecSupport/Matchers/BeRoutingFor.html +0 -155
  568. data/docs/api/Brut/SpecSupport/Matchers/HaveConstraintViolation.html +0 -583
  569. data/docs/api/Brut/SpecSupport/Matchers/HaveGenerated.html +0 -149
  570. data/docs/api/Brut/SpecSupport/Matchers/HaveHTMLAttribute.html +0 -466
  571. data/docs/api/Brut/SpecSupport/Matchers/HaveI18nString.html +0 -149
  572. data/docs/api/Brut/SpecSupport/Matchers/HaveLinkTo.html +0 -149
  573. data/docs/api/Brut/SpecSupport/Matchers/HaveRedirectedTo.html +0 -165
  574. data/docs/api/Brut/SpecSupport/Matchers/HaveReturnedHttpStatus.html +0 -158
  575. data/docs/api/Brut/SpecSupport/Matchers/HaveReturnedRackResponse.html +0 -156
  576. data/docs/api/Brut/SpecSupport/Matchers.html +0 -125
  577. data/docs/api/Brut/SpecSupport/RSpecSetup/OptionalSidekiqSupport.html +0 -335
  578. data/docs/api/Brut/SpecSupport/RSpecSetup.html +0 -637
  579. data/docs/api/Brut/SpecSupport/SessionSupport.html +0 -196
  580. data/docs/api/Brut/SpecSupport.html +0 -129
  581. data/docs/api/Brut/TUI/AnsiEscapeCode/Mod.html +0 -409
  582. data/docs/api/Brut/TUI/AnsiEscapeCode.html +0 -426
  583. data/docs/api/Brut/TUI/EventLoop/Deque.html +0 -531
  584. data/docs/api/Brut/TUI/EventLoop.html +0 -676
  585. data/docs/api/Brut/TUI/Events/BaseEvent.html +0 -449
  586. data/docs/api/Brut/TUI/Events/EventBus.html +0 -485
  587. data/docs/api/Brut/TUI/Events/EventLoopStarted.html +0 -211
  588. data/docs/api/Brut/TUI/Events/Exception.html +0 -523
  589. data/docs/api/Brut/TUI/Events/Tick.html +0 -294
  590. data/docs/api/Brut/TUI/Events.html +0 -131
  591. data/docs/api/Brut/TUI/MarkupString.html +0 -537
  592. data/docs/api/Brut/TUI/Script/BlockStep.html +0 -300
  593. data/docs/api/Brut/TUI/Script/Events/CommandExecutionFailed.html +0 -252
  594. data/docs/api/Brut/TUI/Script/Events/CommandExecutionSucceeded.html +0 -163
  595. data/docs/api/Brut/TUI/Script/Events/CommandStdErr.html +0 -163
  596. data/docs/api/Brut/TUI/Script/Events/CommandStdOut.html +0 -300
  597. data/docs/api/Brut/TUI/Script/Events/ExecutingCommand.html +0 -298
  598. data/docs/api/Brut/TUI/Script/Events/Message.html +0 -345
  599. data/docs/api/Brut/TUI/Script/Events/PhaseCompleted.html +0 -229
  600. data/docs/api/Brut/TUI/Script/Events/PhaseStarted.html +0 -350
  601. data/docs/api/Brut/TUI/Script/Events/ScriptCompleted.html +0 -282
  602. data/docs/api/Brut/TUI/Script/Events/ScriptStarted.html +0 -343
  603. data/docs/api/Brut/TUI/Script/Events/StepCompleted.html +0 -163
  604. data/docs/api/Brut/TUI/Script/Events/StepStarted.html +0 -346
  605. data/docs/api/Brut/TUI/Script/Events.html +0 -115
  606. data/docs/api/Brut/TUI/Script/ExecStep/ProcessStatusFailed.html +0 -210
  607. data/docs/api/Brut/TUI/Script/ExecStep.html +0 -493
  608. data/docs/api/Brut/TUI/Script/LoggingSubscriber.html +0 -914
  609. data/docs/api/Brut/TUI/Script/PutsSubscriber.html +0 -783
  610. data/docs/api/Brut/TUI/Script/Step.html +0 -313
  611. data/docs/api/Brut/TUI/Script.html +0 -1250
  612. data/docs/api/Brut/TUI/Terminal.html +0 -593
  613. data/docs/api/Brut/TUI/TerminalTheme.html +0 -1403
  614. data/docs/api/Brut/TUI/Themes/Dark.html +0 -706
  615. data/docs/api/Brut/TUI/Themes/Light.html +0 -804
  616. data/docs/api/Brut/TUI/Themes/None.html +0 -218
  617. data/docs/api/Brut/TUI/Themes.html +0 -115
  618. data/docs/api/Brut/TUI.html +0 -129
  619. data/docs/api/Brut.html +0 -341
  620. data/docs/api/Clock.html +0 -603
  621. data/docs/api/ModuleName.html +0 -595
  622. data/docs/api/RichString.html +0 -775
  623. data/docs/api/SemanticLogger/Appender/Async.html +0 -219
  624. data/docs/api/Sequel/Extensions/BrutInstrumentation.html +0 -119
  625. data/docs/api/Sequel/Extensions/BrutMigrations.html +0 -541
  626. data/docs/api/Sequel/Extensions.html +0 -117
  627. data/docs/api/Sequel/Plugins/CreatedAt/InstanceMethods.html +0 -105
  628. data/docs/api/Sequel/Plugins/CreatedAt.html +0 -125
  629. data/docs/api/Sequel/Plugins/ExternalId/ClassMethods.html +0 -207
  630. data/docs/api/Sequel/Plugins/ExternalId/InstanceMethods.html +0 -186
  631. data/docs/api/Sequel/Plugins/ExternalId.html +0 -218
  632. data/docs/api/Sequel/Plugins/FindBang/ClassMethods.html +0 -202
  633. data/docs/api/Sequel/Plugins/FindBang.html +0 -125
  634. data/docs/api/Sequel/Plugins.html +0 -117
  635. data/docs/api/Sequel.html +0 -117
  636. data/docs/api/SpecSupport/Matchers/BeABug.html +0 -143
  637. data/docs/api/_index.html +0 -1964
  638. data/docs/api/class_list.html +0 -54
  639. data/docs/api/css/common.css +0 -1
  640. data/docs/api/css/full_list.css +0 -59
  641. data/docs/api/css/style.css +0 -504
  642. data/docs/api/file.README.html +0 -172
  643. data/docs/api/file_list.html +0 -59
  644. data/docs/api/frames.html +0 -22
  645. data/docs/api/index.html +0 -172
  646. data/docs/api/js/app.js +0 -344
  647. data/docs/api/js/full_list.js +0 -242
  648. data/docs/api/js/jquery.js +0 -4
  649. data/docs/api/method_list.html +0 -5542
  650. data/docs/api/top-level-namespace.html +0 -112
  651. data/docs/assets/02-confirmation-dialog-browser-element-styled.3NEGM20-.png +0 -0
  652. data/docs/assets/02-confirmation-dialog-browser-element.DPsf0xUW.png +0 -0
  653. data/docs/assets/02-confirmation-dialog-browser.DH8ALFO4.png +0 -0
  654. data/docs/assets/02-confirmation-flow.D9gZ0S5U.png +0 -0
  655. data/docs/assets/DevEnvironment.DaFcVfwP.png +0 -0
  656. data/docs/assets/LogoStop.Gb3tDhL1.png +0 -0
  657. data/docs/assets/OverviewMetro.DUS-5fUZ.png +0 -0
  658. data/docs/assets/adrs.md.YglbWtQe.js +0 -1
  659. data/docs/assets/adrs.md.YglbWtQe.lean.js +0 -1
  660. data/docs/assets/ai.md.ChLnvDAX.js +0 -1
  661. data/docs/assets/ai.md.ChLnvDAX.lean.js +0 -1
  662. data/docs/assets/app.B8jAEB7R.js +0 -1
  663. data/docs/assets/assets.md.BEF6Oz6K.js +0 -19
  664. data/docs/assets/assets.md.BEF6Oz6K.lean.js +0 -1
  665. data/docs/assets/basic-form-with-violations.Cv6Y9-Q_.png +0 -0
  666. data/docs/assets/basic-form.DbHnu0oW.png +0 -0
  667. data/docs/assets/brut-js.md.BMz0X1Rz.js +0 -12
  668. data/docs/assets/brut-js.md.BMz0X1Rz.lean.js +0 -1
  669. data/docs/assets/business-logic.md.DbuaOYGU.js +0 -1
  670. data/docs/assets/business-logic.md.DbuaOYGU.lean.js +0 -1
  671. data/docs/assets/chunks/@localSearchIndexroot.DJ8mocCj.js +0 -1
  672. data/docs/assets/chunks/VPLocalSearchBox.gF-Po_fz.js +0 -8
  673. data/docs/assets/chunks/framework.C4nOkCZI.js +0 -18
  674. data/docs/assets/chunks/theme.BjPAOJkz.js +0 -2
  675. data/docs/assets/cli.md.DDMar_51.js +0 -122
  676. data/docs/assets/cli.md.DDMar_51.lean.js +0 -1
  677. data/docs/assets/components.md.Ber8UBM0.js +0 -96
  678. data/docs/assets/components.md.Ber8UBM0.lean.js +0 -1
  679. data/docs/assets/configuration.md.DrJ6YVoZ.js +0 -78
  680. data/docs/assets/configuration.md.DrJ6YVoZ.lean.js +0 -1
  681. data/docs/assets/css.md.K5rOCOQY.js +0 -21
  682. data/docs/assets/css.md.K5rOCOQY.lean.js +0 -1
  683. data/docs/assets/custom-element-tests.md.DiLe-eFw.js +0 -69
  684. data/docs/assets/custom-element-tests.md.DiLe-eFw.lean.js +0 -1
  685. data/docs/assets/database-access.md.Dc8l2Plf.js +0 -63
  686. data/docs/assets/database-access.md.Dc8l2Plf.lean.js +0 -1
  687. data/docs/assets/database-schema.md.BJ_JhXmO.js +0 -70
  688. data/docs/assets/database-schema.md.BJ_JhXmO.lean.js +0 -1
  689. data/docs/assets/deployment.md.CHTx2eTR.js +0 -55
  690. data/docs/assets/deployment.md.CHTx2eTR.lean.js +0 -1
  691. data/docs/assets/dev-env-protocol.DysDAtnz.png +0 -0
  692. data/docs/assets/dev-environment.md.B1S9p5ZK.js +0 -16
  693. data/docs/assets/dev-environment.md.B1S9p5ZK.lean.js +0 -1
  694. data/docs/assets/dir-structure.md.D1T2kGwj.js +0 -46
  695. data/docs/assets/dir-structure.md.D1T2kGwj.lean.js +0 -1
  696. data/docs/assets/doc-conventions.md.CDnWaEFg.js +0 -1
  697. data/docs/assets/doc-conventions.md.CDnWaEFg.lean.js +0 -1
  698. data/docs/assets/end-to-end-tests.md.BJJdNDYL.js +0 -28
  699. data/docs/assets/end-to-end-tests.md.BJJdNDYL.lean.js +0 -1
  700. data/docs/assets/features.md.BDWxnyNO.js +0 -154
  701. data/docs/assets/features.md.BDWxnyNO.lean.js +0 -1
  702. data/docs/assets/flash-and-session.md.CUsMxoNl.js +0 -79
  703. data/docs/assets/flash-and-session.md.CUsMxoNl.lean.js +0 -1
  704. data/docs/assets/form-constraints.md.KlfXSKm2.js +0 -90
  705. data/docs/assets/form-constraints.md.KlfXSKm2.lean.js +0 -1
  706. data/docs/assets/forms.md.RK0zkhm0.js +0 -64
  707. data/docs/assets/forms.md.RK0zkhm0.lean.js +0 -1
  708. data/docs/assets/getting-started.md.CGJ44juQ.js +0 -31
  709. data/docs/assets/getting-started.md.CGJ44juQ.lean.js +0 -1
  710. data/docs/assets/handlers.md.C5tUwmmo.js +0 -54
  711. data/docs/assets/handlers.md.C5tUwmmo.lean.js +0 -1
  712. data/docs/assets/hooks.md.CoiYCKRc.js +0 -80
  713. data/docs/assets/hooks.md.CoiYCKRc.lean.js +0 -1
  714. data/docs/assets/i18n.md.DxkCKhUw.js +0 -23
  715. data/docs/assets/i18n.md.DxkCKhUw.lean.js +0 -1
  716. data/docs/assets/index.md.DnphWyQd.js +0 -1
  717. data/docs/assets/index.md.DnphWyQd.lean.js +0 -1
  718. data/docs/assets/initial-home-page.DNIaYmgP.png +0 -0
  719. data/docs/assets/instrumentation.md.BcxjC4jd.js +0 -90
  720. data/docs/assets/instrumentation.md.BcxjC4jd.lean.js +0 -1
  721. data/docs/assets/javascript.md.D6fxhaQb.js +0 -31
  722. data/docs/assets/javascript.md.D6fxhaQb.lean.js +0 -1
  723. data/docs/assets/jobs.md.Bi3qb3v6.js +0 -25
  724. data/docs/assets/jobs.md.Bi3qb3v6.lean.js +0 -1
  725. data/docs/assets/keyword-injection.md.CqLnnzIz.js +0 -21
  726. data/docs/assets/keyword-injection.md.CqLnnzIz.lean.js +0 -1
  727. data/docs/assets/layouts.md.HEbeK7Jr.js +0 -68
  728. data/docs/assets/layouts.md.HEbeK7Jr.lean.js +0 -1
  729. data/docs/assets/lsp.md.bE9dW8n9.js +0 -1
  730. data/docs/assets/lsp.md.bE9dW8n9.lean.js +0 -1
  731. data/docs/assets/markdown-examples.md.BPmtHlc-.js +0 -33
  732. data/docs/assets/markdown-examples.md.BPmtHlc-.lean.js +0 -1
  733. data/docs/assets/middleware.md.BhOIsg59.js +0 -20
  734. data/docs/assets/middleware.md.BhOIsg59.lean.js +0 -1
  735. data/docs/assets/new-post-editor.DrHr-5oh.png +0 -0
  736. data/docs/assets/new-post-home-page.Bm34lyMg.png +0 -0
  737. data/docs/assets/overview.md.BpWAgPFH.js +0 -1
  738. data/docs/assets/overview.md.BpWAgPFH.lean.js +0 -1
  739. data/docs/assets/pages.md.B3sQXpEd.js +0 -45
  740. data/docs/assets/pages.md.B3sQXpEd.lean.js +0 -1
  741. data/docs/assets/recipes_alternate-layouts.md.C1QzVkA7.js +0 -22
  742. data/docs/assets/recipes_alternate-layouts.md.C1QzVkA7.lean.js +0 -1
  743. data/docs/assets/recipes_authentication.md.CyvoIW82.js +0 -157
  744. data/docs/assets/recipes_authentication.md.CyvoIW82.lean.js +0 -1
  745. data/docs/assets/recipes_custom-flash.md.6gFqf2uL.js +0 -26
  746. data/docs/assets/recipes_custom-flash.md.6gFqf2uL.lean.js +0 -1
  747. data/docs/assets/recipes_dev-env-secrets.md.DC_jVY9U.js +0 -12
  748. data/docs/assets/recipes_dev-env-secrets.md.DC_jVY9U.lean.js +0 -1
  749. data/docs/assets/recipes_form-errors.md.B5ptSzMO.js +0 -66
  750. data/docs/assets/recipes_form-errors.md.B5ptSzMO.lean.js +0 -1
  751. data/docs/assets/recipes_indexed-forms.md.BYYQGW2C.js +0 -74
  752. data/docs/assets/recipes_indexed-forms.md.BYYQGW2C.lean.js +0 -1
  753. data/docs/assets/recipes_migrations.md.Cid7-3cu.js +0 -97
  754. data/docs/assets/recipes_migrations.md.Cid7-3cu.lean.js +0 -1
  755. data/docs/assets/recipes_text-field-component.md.VhOsCtKI.js +0 -101
  756. data/docs/assets/recipes_text-field-component.md.VhOsCtKI.lean.js +0 -1
  757. data/docs/assets/roadmap.md.DqC1Y7Zt.js +0 -1
  758. data/docs/assets/roadmap.md.DqC1Y7Zt.lean.js +0 -1
  759. data/docs/assets/routes.md.C1dgIBtD.js +0 -21
  760. data/docs/assets/routes.md.C1dgIBtD.lean.js +0 -1
  761. data/docs/assets/security.md.Jn4SY1uK.js +0 -1
  762. data/docs/assets/security.md.Jn4SY1uK.lean.js +0 -1
  763. data/docs/assets/seed-data.md.UZW0WxYN.js +0 -14
  764. data/docs/assets/seed-data.md.UZW0WxYN.lean.js +0 -1
  765. data/docs/assets/spa.qejUdp-5.png +0 -0
  766. data/docs/assets/space-time-continuum.md.D9rYGDFH.js +0 -1
  767. data/docs/assets/space-time-continuum.md.D9rYGDFH.lean.js +0 -1
  768. data/docs/assets/style.B1z60PPQ.css +0 -1
  769. data/docs/assets/styled-form-with-server-side-violations.Bjxd8Dpv.png +0 -0
  770. data/docs/assets/styled-form-with-violations.Bv_sa9tg.png +0 -0
  771. data/docs/assets/styled-home-page-with-posts.Dd4kG89D.png +0 -0
  772. data/docs/assets/styled-home-page.BzdI7dWz.png +0 -0
  773. data/docs/assets/tutorial.md.BX6f6l00.js +0 -27
  774. data/docs/assets/tutorial.md.BX6f6l00.lean.js +0 -1
  775. data/docs/assets/tutorials_01-intro.md.CzZ3kpF_.js +0 -708
  776. data/docs/assets/tutorials_01-intro.md.CzZ3kpF_.lean.js +0 -1
  777. data/docs/assets/tutorials_02-dialog.md.DE5WfCXI.js +0 -274
  778. data/docs/assets/tutorials_02-dialog.md.DE5WfCXI.lean.js +0 -1
  779. data/docs/assets/unit-tests.md.vDsdBbO_.js +0 -13
  780. data/docs/assets/unit-tests.md.vDsdBbO_.lean.js +0 -1
  781. data/docs/assets/welcome-to-brut.VSWzl17-.png +0 -0
  782. data/docs/assets/why.md.4WpxdrQ2.js +0 -1
  783. data/docs/assets/why.md.4WpxdrQ2.lean.js +0 -1
  784. data/docs/assets/workspace-protocol.C0gXsoDb.png +0 -0
  785. data/docs/assets.html +0 -47
  786. data/docs/brut-css/brut.css +0 -1
  787. data/docs/brut-css/brut.max.css +0 -22372
  788. data/docs/brut-css/classes/appearances.html +0 -783
  789. data/docs/brut-css/classes/background-colors.html +0 -3529
  790. data/docs/brut-css/classes/border-colors.html +0 -3529
  791. data/docs/brut-css/classes/borders.html +0 -2293
  792. data/docs/brut-css/classes/dimensions.html +0 -2581
  793. data/docs/brut-css/classes/flex.html +0 -917
  794. data/docs/brut-css/classes/foreground-colors.html +0 -3261
  795. data/docs/brut-css/classes/junk-drawer.html +0 -431
  796. data/docs/brut-css/classes/layout.html +0 -668
  797. data/docs/brut-css/classes/lists.html +0 -331
  798. data/docs/brut-css/classes/positioning.html +0 -1751
  799. data/docs/brut-css/classes/spacings.html +0 -2633
  800. data/docs/brut-css/classes/typography.html +0 -2206
  801. data/docs/brut-css/customization/advanced-configuration.html +0 -204
  802. data/docs/brut-css/customization/breakpoints.html +0 -227
  803. data/docs/brut-css/customization/design-system.html +0 -197
  804. data/docs/brut-css/customization/pseudo-classes.html +0 -228
  805. data/docs/brut-css/docs.css +0 -98
  806. data/docs/brut-css/getting-started/core-concepts.html +0 -234
  807. data/docs/brut-css/getting-started/installation.html +0 -190
  808. data/docs/brut-css/getting-started/overview.html +0 -210
  809. data/docs/brut-css/getting-started/simple-example.html +0 -285
  810. data/docs/brut-css/index.html +0 -193
  811. data/docs/brut-css/prism-twilight.min.css +0 -1
  812. data/docs/brut-css/properties/colors.html +0 -1548
  813. data/docs/brut-css/properties/spacings.html +0 -614
  814. data/docs/brut-css/properties/typography.html +0 -777
  815. data/docs/brut-js/api/AjaxSubmit.html +0 -452
  816. data/docs/brut-js/api/AjaxSubmit.js.html +0 -550
  817. data/docs/brut-js/api/Autosubmit.html +0 -192
  818. data/docs/brut-js/api/Autosubmit.js.html +0 -114
  819. data/docs/brut-js/api/BaseCustomElement.html +0 -1091
  820. data/docs/brut-js/api/BaseCustomElement.js.html +0 -312
  821. data/docs/brut-js/api/BrutCustomElements.html +0 -172
  822. data/docs/brut-js/api/BufferedLogger.html +0 -173
  823. data/docs/brut-js/api/ConfirmSubmit.html +0 -286
  824. data/docs/brut-js/api/ConfirmSubmit.js.html +0 -188
  825. data/docs/brut-js/api/ConfirmationDialog.html +0 -425
  826. data/docs/brut-js/api/ConfirmationDialog.js.html +0 -194
  827. data/docs/brut-js/api/ConstraintViolationMessage.html +0 -498
  828. data/docs/brut-js/api/ConstraintViolationMessage.js.html +0 -191
  829. data/docs/brut-js/api/ConstraintViolationMessages.html +0 -590
  830. data/docs/brut-js/api/ConstraintViolationMessages.js.html +0 -149
  831. data/docs/brut-js/api/CopyToClipboard.html +0 -345
  832. data/docs/brut-js/api/CopyToClipboard.js.html +0 -147
  833. data/docs/brut-js/api/Form.html +0 -291
  834. data/docs/brut-js/api/Form.js.html +0 -198
  835. data/docs/brut-js/api/I18nTranslation.html +0 -409
  836. data/docs/brut-js/api/I18nTranslation.js.html +0 -115
  837. data/docs/brut-js/api/LocaleDetection.html +0 -312
  838. data/docs/brut-js/api/LocaleDetection.js.html +0 -168
  839. data/docs/brut-js/api/Logger.html +0 -702
  840. data/docs/brut-js/api/Logger.js.html +0 -141
  841. data/docs/brut-js/api/Message.html +0 -238
  842. data/docs/brut-js/api/Message.js.html +0 -113
  843. data/docs/brut-js/api/PrefixedLogger.html +0 -369
  844. data/docs/brut-js/api/RichString.html +0 -1049
  845. data/docs/brut-js/api/RichString.js.html +0 -167
  846. data/docs/brut-js/api/Tabs.html +0 -295
  847. data/docs/brut-js/api/Tabs.js.html +0 -219
  848. data/docs/brut-js/api/Toast.html +0 -270
  849. data/docs/brut-js/api/Toast.js.html +0 -153
  850. data/docs/brut-js/api/Tracing.html +0 -277
  851. data/docs/brut-js/api/Tracing.js.html +0 -298
  852. data/docs/brut-js/api/external-CustomElementRegistry.html +0 -140
  853. data/docs/brut-js/api/external-Performance.html +0 -138
  854. data/docs/brut-js/api/external-Promise.html +0 -138
  855. data/docs/brut-js/api/external-ValidityState.html +0 -138
  856. data/docs/brut-js/api/external-Window.html +0 -233
  857. data/docs/brut-js/api/external-fetch.html +0 -138
  858. data/docs/brut-js/api/global.html +0 -400
  859. data/docs/brut-js/api/index.html +0 -168
  860. data/docs/brut-js/api/index.js.html +0 -184
  861. data/docs/brut-js/api/module-testing.html +0 -383
  862. data/docs/brut-js/api/scripts/linenumber.js +0 -25
  863. data/docs/brut-js/api/scripts/prettify/Apache-License-2.0.txt +0 -202
  864. data/docs/brut-js/api/scripts/prettify/lang-css.js +0 -2
  865. data/docs/brut-js/api/scripts/prettify/prettify.js +0 -28
  866. data/docs/brut-js/api/styles/jsdoc-default.css +0 -327
  867. data/docs/brut-js/api/styles/prettify-jsdoc.css +0 -111
  868. data/docs/brut-js/api/styles/prettify-tomorrow.css +0 -132
  869. data/docs/brut-js/api/testing.AssetMetadata.html +0 -172
  870. data/docs/brut-js/api/testing.AssetMetadataLoader.html +0 -171
  871. data/docs/brut-js/api/testing.CustomElementTest.html +0 -679
  872. data/docs/brut-js/api/testing.DOMCreator.html +0 -171
  873. data/docs/brut-js/api/testing_AssetMetadata.js.html +0 -86
  874. data/docs/brut-js/api/testing_AssetMetadataLoader.js.html +0 -76
  875. data/docs/brut-js/api/testing_CustomElementTest.js.html +0 -286
  876. data/docs/brut-js/api/testing_DOMCreator.js.html +0 -96
  877. data/docs/brut-js/api/testing_index.js.html +0 -99
  878. data/docs/brut-js.html +0 -40
  879. data/docs/business-logic.html +0 -29
  880. data/docs/cli.html +0 -150
  881. data/docs/components.html +0 -124
  882. data/docs/configuration.html +0 -106
  883. data/docs/css.html +0 -49
  884. data/docs/custom-element-tests.html +0 -97
  885. data/docs/database-access.html +0 -91
  886. data/docs/database-schema.html +0 -98
  887. data/docs/deployment.html +0 -83
  888. data/docs/dev-environment.html +0 -44
  889. data/docs/dir-structure.html +0 -74
  890. data/docs/doc-conventions.html +0 -29
  891. data/docs/end-to-end-tests.html +0 -56
  892. data/docs/favicon.ico +0 -0
  893. data/docs/features.html +0 -182
  894. data/docs/flash-and-session.html +0 -107
  895. data/docs/form-constraints.html +0 -118
  896. data/docs/forms.html +0 -92
  897. data/docs/getting-started.html +0 -59
  898. data/docs/handlers.html +0 -82
  899. data/docs/hashmap.json +0 -1
  900. data/docs/hooks.html +0 -108
  901. data/docs/i18n.html +0 -51
  902. data/docs/index.html +0 -29
  903. data/docs/instrumentation.html +0 -118
  904. data/docs/javascript.html +0 -59
  905. data/docs/jobs.html +0 -53
  906. data/docs/keyword-injection.html +0 -49
  907. data/docs/layouts.html +0 -96
  908. data/docs/lsp.html +0 -29
  909. data/docs/markdown-examples.html +0 -61
  910. data/docs/middleware.html +0 -48
  911. data/docs/overview.html +0 -29
  912. data/docs/pages.html +0 -73
  913. data/docs/recipes/alternate-layouts.html +0 -50
  914. data/docs/recipes/authentication.html +0 -185
  915. data/docs/recipes/custom-flash.html +0 -54
  916. data/docs/recipes/dev-env-secrets.html +0 -40
  917. data/docs/recipes/form-errors.html +0 -94
  918. data/docs/recipes/indexed-forms.html +0 -102
  919. data/docs/recipes/migrations.html +0 -125
  920. data/docs/recipes/text-field-component.html +0 -129
  921. data/docs/roadmap.html +0 -29
  922. data/docs/routes.html +0 -49
  923. data/docs/security.html +0 -29
  924. data/docs/seed-data.html +0 -42
  925. data/docs/space-time-continuum.html +0 -29
  926. data/docs/tutorial.html +0 -55
  927. data/docs/tutorials/01-intro.html +0 -736
  928. data/docs/tutorials/02-dialog.html +0 -302
  929. data/docs/unit-tests.html +0 -41
  930. data/docs/vp-icons.css +0 -1
  931. data/docs/why.html +0 -29
  932. data/docs-todo.md +0 -32
  933. data/dx/bash_customizations +0 -6
  934. data/dx/build +0 -73
  935. data/dx/build.pre +0 -15
  936. data/dx/docker-compose.env +0 -22
  937. data/dx/dx.sh.lib +0 -24
  938. data/dx/exec +0 -75
  939. data/dx/setupkit.sh.lib +0 -144
  940. data/dx/show-help-in-app-container-then-wait.sh +0 -38
  941. data/lib/brut/cli/app.rb +0 -238
  942. data/lib/brut/cli/app_runner.rb +0 -252
  943. data/lib/brut/cli/command.rb +0 -258
  944. data/lib/brut/cli/execution_results.rb +0 -119
  945. data/lib/brut/front_end/layouts/_internal.html.erb +0 -68
  946. data/lib/brut/front_end/pages/_missing_page.html.erb +0 -17
  947. data/mkbrut/.gitignore +0 -16
  948. data/mkbrut/CODE_OF_CONDUCT.txt +0 -100
  949. data/mkbrut/Gemfile +0 -3
  950. data/mkbrut/Gemfile.lock +0 -20
  951. data/mkbrut/LICENSE.txt +0 -370
  952. data/mkbrut/README.md +0 -145
  953. data/mkbrut/Rakefile +0 -2
  954. data/mkbrut/bin/build +0 -36
  955. data/mkbrut/bin/ci +0 -19
  956. data/mkbrut/bin/docs +0 -19
  957. data/mkbrut/bin/publish +0 -129
  958. data/mkbrut/bin/rake +0 -16
  959. data/mkbrut/bin/setup +0 -30
  960. data/mkbrut/brut-welcome.png +0 -0
  961. data/mkbrut/deploy/.dockerignore +0 -2
  962. data/mkbrut/deploy/Dockerfile +0 -25
  963. data/mkbrut/dx +0 -1
  964. data/mkbrut/exe/mkbrut +0 -5
  965. data/mkbrut/lib/mkbrut/app_name.rb +0 -29
  966. data/mkbrut/lib/mkbrut/app_options.rb +0 -36
  967. data/mkbrut/lib/mkbrut/cli.rb +0 -189
  968. data/mkbrut/lib/mkbrut/erb_binding_delegate.rb +0 -20
  969. data/mkbrut/lib/mkbrut/ops.rb +0 -17
  970. data/mkbrut/lib/mkbrut/organization.rb +0 -5
  971. data/mkbrut/lib/mkbrut/segments.rb +0 -8
  972. data/mkbrut/lib/mkbrut/version.rb +0 -3
  973. data/mkbrut/lib/mkbrut.rb +0 -20
  974. data/mkbrut/mkbrut.gemspec +0 -34
  975. data/mkbrut/templates/Base/app/src/front_end/images/LogoPylon.png +0 -0
  976. data/mkbrut/templates/Base/bin/build-assets +0 -7
  977. data/mkbrut/templates/Base/bin/ci +0 -39
  978. data/mkbrut/templates/Base/bin/db +0 -9
  979. data/mkbrut/templates/Base/bin/scaffold +0 -9
  980. data/mkbrut/templates/Base/bin/setup +0 -287
  981. data/mkbrut/templates/Base/bin/test +0 -9
  982. data/mkbrut/templates/Base/bin/test-server +0 -29
  983. data/mkbrut/templates/Base/dx/prune +0 -19
  984. data/mkbrut/templates/Base/dx/start +0 -30
  985. data/mkbrut/templates/Base/dx/stop +0 -23
  986. data/mkbrut/templates/segments/Heroku/deploy/heroku_config.rb +0 -27
  987. data/specs/brut/front_end/forms/input.spec.rb +0 -978
  988. data/specs/brut/front_end/forms/radio_button_group_input.spec.rb +0 -54
  989. data/specs/brut/front_end/forms/select_input.spec.rb +0 -54
  990. data/specs/brut/instrumentation/methods.spec.rb +0 -399
  991. data/specs/brut/junk_drawer.spec.rb +0 -79
  992. data/specs/brut/tui/ansi_escape_code.spec.rb +0 -30
  993. data/specs/brut/tui/event_loop.spec.rb +0 -70
  994. data/specs/brut/tui/events/base_event.spec.rb +0 -26
  995. data/specs/brut/tui/events/event_bus.spec.rb +0 -141
  996. data/specs/brut/tui/events/exception.spec.rb +0 -19
  997. data/specs/brut/tui/events/test_event.rb +0 -5
  998. data/specs/spec_helper.rb +0 -31
  999. data/specs/support/matchers/have_constraint_violation.rb +0 -23
  1000. data/specs/support/matchers.rb +0 -5
  1001. data/specs/support.rb +0 -3
  1002. /data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/prefixed_io.rb +0 -0
  1003. /data/{mkbrut/templates → templates}/Base/.dockerignore +0 -0
  1004. /data/{mkbrut/templates → templates}/Base/.env.development.erb +0 -0
  1005. /data/{mkbrut/templates → templates}/Base/.env.test.erb +0 -0
  1006. /data/{mkbrut/templates → templates}/Base/.gitignore +0 -0
  1007. /data/{mkbrut/templates → templates}/Base/.projections.json +0 -0
  1008. /data/{mkbrut/templates → templates}/Base/Dockerfile.dx +0 -0
  1009. /data/{mkbrut/templates → templates}/Base/Gemfile.erb +0 -0
  1010. /data/{mkbrut/templates → templates}/Base/Procfile.development +0 -0
  1011. /data/{mkbrut/templates → templates}/Base/Procfile.test +0 -0
  1012. /data/{mkbrut/templates → templates}/Base/README.md +0 -0
  1013. /data/{mkbrut/templates → templates}/Base/README.md.erb +0 -0
  1014. /data/{mkbrut/templates → templates}/Base/app/bootstrap.rb +0 -0
  1015. /data/{mkbrut/templates → templates}/Base/app/config/i18n/en/1_defaults.rb +0 -0
  1016. /data/{mkbrut/templates → templates}/Base/app/config/i18n/en/2_app.rb +0 -0
  1017. /data/{mkbrut/templates → templates}/Base/app/public/static/manifest.json.erb +0 -0
  1018. /data/{mkbrut/templates → templates}/Base/app/src/app.rb.erb +0 -0
  1019. /data/{mkbrut/templates → templates}/Base/app/src/back_end/data_models/app_data_model.rb +0 -0
  1020. /data/{mkbrut/templates → templates}/Base/app/src/back_end/data_models/db.rb +0 -0
  1021. /data/{mkbrut/templates → templates}/Base/app/src/back_end/data_models/migrations/20240101130000_citext.rb +0 -0
  1022. /data/{mkbrut/templates → templates}/Base/app/src/back_end/data_models/seed/seed_data.rb +0 -0
  1023. /data/{mkbrut/templates → templates}/Base/app/src/front_end/components/app_component.rb +0 -0
  1024. /data/{mkbrut/templates → templates}/Base/app/src/front_end/components/custom_element_registration.rb.erb +0 -0
  1025. /data/{mkbrut/templates → templates}/Base/app/src/front_end/css/index.css +0 -0
  1026. /data/{mkbrut/templates → templates}/Base/app/src/front_end/css/svgs.css +0 -0
  1027. /data/{mkbrut/templates → templates}/Base/app/src/front_end/forms/app_form.rb +0 -0
  1028. /data/{mkbrut/templates → templates}/Base/app/src/front_end/handlers/app_handler.rb +0 -0
  1029. /data/{brutrb.com → templates/Base/app/src/front_end}/images/LogoPylon.png +0 -0
  1030. /data/{mkbrut/templates → templates}/Base/app/src/front_end/images/LogoTransit.png +0 -0
  1031. /data/{mkbrut/templates → templates}/Base/app/src/front_end/images/apple-touch-icon-120x120.png +0 -0
  1032. /data/{mkbrut/templates → templates}/Base/app/src/front_end/images/apple-touch-icon-152x152.png +0 -0
  1033. /data/{mkbrut/templates → templates}/Base/app/src/front_end/images/apple-touch-icon-167x167.png +0 -0
  1034. /data/{mkbrut/templates → templates}/Base/app/src/front_end/images/apple-touch-icon-180x180.png +0 -0
  1035. /data/{mkbrut/templates → templates}/Base/app/src/front_end/images/favicon.ico +0 -0
  1036. /data/{mkbrut/templates → templates}/Base/app/src/front_end/images/icon.png +0 -0
  1037. /data/{mkbrut/templates → templates}/Base/app/src/front_end/images/mkicons.sh +0 -0
  1038. /data/{mkbrut/templates → templates}/Base/app/src/front_end/js/index.js +0 -0
  1039. /data/{mkbrut/templates → templates}/Base/app/src/front_end/layouts/blank_layout.rb +0 -0
  1040. /data/{mkbrut/templates → templates}/Base/app/src/front_end/layouts/default_layout.rb.erb +0 -0
  1041. /data/{mkbrut/templates → templates}/Base/app/src/front_end/pages/app_page.rb +0 -0
  1042. /data/{mkbrut/templates → templates}/Base/app/src/front_end/pages/home_page.rb +0 -0
  1043. /data/{mkbrut/templates → templates}/Base/app/src/front_end/support/app_session.rb +0 -0
  1044. /data/{mkbrut/templates → templates}/Base/app/src/front_end/svgs/README.md +0 -0
  1045. /data/{mkbrut/templates → templates}/Base/app/src/front_end/svgs/comment-button.svg +0 -0
  1046. /data/{mkbrut/templates → templates}/Base/bin/README.md.erb +0 -0
  1047. /data/{mkbrut/templates → templates}/Base/bin/console +0 -0
  1048. /data/{mkbrut/templates → templates}/Base/bin/dbconsole +0 -0
  1049. /data/{mkbrut/templates → templates}/Base/bin/dev +0 -0
  1050. /data/{mkbrut/templates → templates}/Base/bin/run +0 -0
  1051. /data/{mkbrut/templates → templates}/Base/bin/run.run +0 -0
  1052. /data/{mkbrut/templates → templates}/Base/bin/startup-message +0 -0
  1053. /data/{mkbrut/templates → templates}/Base/config.ru +0 -0
  1054. /data/{mkbrut/templates → templates}/Base/docker-compose.dx.yml +0 -0
  1055. /data/{mkbrut/templates → templates}/Base/dx/README.md +0 -0
  1056. /data/{mkbrut/templates → templates}/Base/dx/bash_customizations +0 -0
  1057. /data/{mkbrut/templates → templates}/Base/dx/bash_customizations.local +0 -0
  1058. /data/{mkbrut/templates → templates}/Base/dx/build +0 -0
  1059. /data/{mkbrut/templates → templates}/Base/dx/dx.sh.lib +0 -0
  1060. /data/{mkbrut/templates → templates}/Base/dx/exec +0 -0
  1061. /data/{dx → templates/Base/dx}/prune +0 -0
  1062. /data/{mkbrut/templates → templates}/Base/dx/show-help-in-app-container-then-wait.sh +0 -0
  1063. /data/{dx → templates/Base/dx}/start +0 -0
  1064. /data/{dx → templates/Base/dx}/stop +0 -0
  1065. /data/{mkbrut/templates → templates}/Base/package.json.erb +0 -0
  1066. /data/{mkbrut/templates → templates}/Base/puma.config.rb +0 -0
  1067. /data/{mkbrut/templates → templates}/Base/specs/e2e/home_page.spec.rb.erb +0 -0
  1068. /data/{mkbrut/templates → templates}/Base/specs/front_end/js/SpecHelper.js +0 -0
  1069. /data/{mkbrut/templates → templates}/Base/specs/front_end/pages/home_page.spec.rb +0 -0
  1070. /data/{mkbrut/templates → templates}/Base/specs/lint_factories.spec.rb +0 -0
  1071. /data/{mkbrut/templates → templates}/Base/specs/spec_helper.rb +0 -0
  1072. /data/{mkbrut/templates → templates}/Base/specs/support.rb +0 -0
  1073. /data/{mkbrut/templates → templates}/segments/BareBones/app/src/front_end/handlers/trigger_exception_handler.rb +0 -0
  1074. /data/{mkbrut/templates → templates}/segments/BareBones/app/src/front_end/js/Example.js.erb +0 -0
  1075. /data/{mkbrut/templates → templates}/segments/BareBones/specs/front_end/handlers/trigger_exception_handler.spec.rb +0 -0
  1076. /data/{mkbrut/templates → templates}/segments/BareBones/specs/front_end/js/Example.spec.js.erb +0 -0
  1077. /data/{mkbrut/templates → templates}/segments/Demo/app/src/back_end/data_models/db/guestbook_message.rb +0 -0
  1078. /data/{mkbrut/templates → templates}/segments/Demo/app/src/back_end/data_models/migrations/20250628194124_guestbook.rb +0 -0
  1079. /data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/components/flash_component.rb +0 -0
  1080. /data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/css/constraint-violations.css +0 -0
  1081. /data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/fonts/monaspace-xenon.ttf +0 -0
  1082. /data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/forms/guestbook_message_form.rb +0 -0
  1083. /data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/handlers/guestbook_message_handler.rb +0 -0
  1084. /data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/pages/guestbook_page/message_component.rb +0 -0
  1085. /data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/pages/guestbook_page.rb +0 -0
  1086. /data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/pages/new_guestbook_message_page.rb +0 -0
  1087. /data/{mkbrut/templates → templates}/segments/Demo/specs/back_end/data_models/db/guestbook_message.spec.rb +0 -0
  1088. /data/{mkbrut/templates → templates}/segments/Demo/specs/e2e/guest_message.spec.rb +0 -0
  1089. /data/{mkbrut/templates → templates}/segments/Demo/specs/factories/db/guestbook_message.factory.rb +0 -0
  1090. /data/{mkbrut/templates → templates}/segments/Demo/specs/front_end/components/flash_component.spec.rb +0 -0
  1091. /data/{mkbrut/templates → templates}/segments/Demo/specs/front_end/handlers/guestbook_message_handler.spec.rb +0 -0
  1092. /data/{mkbrut/templates → templates}/segments/Demo/specs/front_end/pages/guestbook_page/message_component.spec.rb +0 -0
  1093. /data/{mkbrut/templates → templates}/segments/Demo/specs/front_end/pages/guestbook_page.spec.rb +0 -0
  1094. /data/{mkbrut/templates → templates}/segments/Demo/specs/front_end/pages/new_guestbook_message_page.spec.rb +0 -0
  1095. /data/{mkbrut/templates → templates}/segments/Heroku/bin/deploy +0 -0
  1096. /data/{mkbrut/templates → templates}/segments/Heroku/deploy/docker-entrypoint +0 -0
  1097. /data/{mkbrut/templates → templates}/segments/Sidekiq/app/boot_sidekiq.rb +0 -0
  1098. /data/{mkbrut/templates → templates}/segments/Sidekiq/app/config/sidekiq.yml +0 -0
  1099. /data/{mkbrut/templates → templates}/segments/Sidekiq/app/src/back_end/jobs/app_job.rb +0 -0
  1100. /data/{mkbrut/templates → templates}/segments/Sidekiq/app/src/back_end/jobs/example_job.rb +0 -0
  1101. /data/{mkbrut/templates → templates}/segments/Sidekiq/app/src/back_end/segments/sidekiq_segment.rb +0 -0
  1102. /data/{mkbrut/templates → templates}/segments/Sidekiq/bin/run.sidekiq +0 -0
  1103. /data/{mkbrut/templates → templates}/segments/Sidekiq/specs/back_end/jobs/example_job.spec.rb +0 -0
  1104. /data/{mkbrut/templates → templates}/segments/Sidekiq/specs/integration/sidekiq_works.spec.rb +0 -0
data/docs/brut-css/classes/foreground-colors.html DELETED
@@ -1,3261 +0,0 @@
1
- <!doctype html>
2
- <html class="ma-0 pa-0 h-100" lang="en">
3
- <head>
4
- <link rel="stylesheet" href="/brut-css/brut.css">
5
- <link rel="stylesheet" href="/brut-css/docs.css">
6
- <link rel="stylesheet" href="/brut-css/prism-twilight.min.css">
7
- </head>
8
-
9
- <body class="flex flex-column ff-sans ma-0 pa-0 h-100">
10
- <header class="pos-sticky top-0 bg-gray-700 pa-3 z-5 shadow-2">
11
- <div class="flex gap-3 justify-between items-center">
12
- <h1><a href="/brut-css" class="black tdn">BrutCSS Reference Documentation</a></h1>
13
- <ul class="lst-none pl-0 flex gap-2 justify-end items-center">
14
- <form class="dn flex items-center gap-1 mr-3">
15
- <label>
16
- <input type="search" placeholder="e.g. padding-left" class="pa-2 br-2 ba bc-gray-600 bg-white-ish gray-200">
17
- <span class="sr-only">Search term</span>
18
- </label>
19
- <button class="ph-3 pv-2 bg-white gray-100 ba bc-gray-500 br-3 hover-bg-gray-800 pointer flex items-center justify-between">
20
- <span class="mr-2">Search</span>
21
- <kbd>&#8984;</kbd>
22
- <kbd>/</kbd>
23
- </button>
24
- </form>
25
- <li><a href="/" class="red-200 tdn hover-tdu">BrutRB</a></li>
26
- <span aria-hidden="true">&middot;</span>
27
- <li><a href="/brut-js" class="gray-200 tdn hover-tdu">BrutJS</a></li>
28
- <span aria-hidden="true">&middot;</span>
29
- <li><a href="https://github.com/thirdtank/brut/tree/main/brut-css" class="gray-200 tdn hover-tdu">Code</a></li>
30
- </ul>
31
- </div>
32
- </header>
33
- <main class="flex overflow-hidden flex-grow-1 flex-shrink-1 flex-basis-0 pos-relative">
34
- <nav class="overflow-y-auto ph-3 pb-2 pt-4 w-20 bg-gray-800 gray-200 h-100">
35
-
36
- <h3>Getting Started</h3>
37
- <ul class="pl-3">
38
-
39
- <li>
40
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/overview.html">Overview</a>
41
- </li>
42
-
43
- <li>
44
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/installation.html">Installation</a>
45
- </li>
46
-
47
- <li>
48
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/core-concepts.html">Core Concepts</a>
49
- </li>
50
-
51
- <li>
52
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/simple-example.html">Simple Example</a>
53
- </li>
54
-
55
- </ul>
56
-
57
- <h3>Properties</h3>
58
- <ul class="pl-3">
59
-
60
- <li>
61
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/colors.html">Colors</a>
62
- </li>
63
-
64
- <li>
65
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/spacings.html">Spacings</a>
66
- </li>
67
-
68
- <li>
69
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/typography.html">Typography</a>
70
- </li>
71
-
72
- </ul>
73
-
74
- <h3>Classes</h3>
75
- <ul class="pl-3">
76
-
77
- <li>
78
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/appearances.html">Appearances</a>
79
- </li>
80
-
81
- <li>
82
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/borders.html">Borders</a>
83
- </li>
84
-
85
- <li>
86
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/foreground-colors.html">Foreground Colors</a>
87
- </li>
88
-
89
- <li>
90
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/background-colors.html">Background Colors</a>
91
- </li>
92
-
93
- <li>
94
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/border-colors.html">Border Colors</a>
95
- </li>
96
-
97
- <li>
98
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/dimensions.html">Dimensions</a>
99
- </li>
100
-
101
- <li>
102
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/flex.html">Flex</a>
103
- </li>
104
-
105
- <li>
106
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/layout.html">Layout</a>
107
- </li>
108
-
109
- <li>
110
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/lists.html">Lists</a>
111
- </li>
112
-
113
- <li>
114
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/positioning.html">Positioning</a>
115
- </li>
116
-
117
- <li>
118
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/spacings.html">Spacings</a>
119
- </li>
120
-
121
- <li>
122
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/typography.html">Typography</a>
123
- </li>
124
-
125
- <li>
126
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/junk-drawer.html">Junk Drawer</a>
127
- </li>
128
-
129
- </ul>
130
-
131
- <h3>Customization</h3>
132
- <ul class="pl-3">
133
-
134
- <li>
135
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/design-system.html">Design System</a>
136
- </li>
137
-
138
- <li>
139
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/breakpoints.html">Breakpoints</a>
140
- </li>
141
-
142
- <li>
143
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/pseudo-classes.html">Pseudo Classes</a>
144
- </li>
145
-
146
- <li>
147
- <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/advanced-configuration.html">Advanced Configuration</a>
148
- </li>
149
-
150
- </ul>
151
-
152
-
153
- </nav>
154
- <section class="overflow-y-auto pt-4 h-100 flex-grow-1 flex-shrink-1 flex-basis-0 flex flex-column">
155
- <div class="ph-3 pv-2 flex items-start gap-2 justify-between">
156
-
157
- <article>
158
- <h2 class="}-5">Foreground Colors Classes</h2>
159
-
160
- <p>Foreground colors. For red, orange, yellow, green, blue, purple, and gray, there are nine steps in the scale, from 100 being darkest to 900 being lightest. Black and white have only two steps: pure black/white and slightly off black/white. The colors and shades are shown in the table below.</p>
161
-
162
- <div class="pa-3 inset-shadow-1 br-3 mb-3">
163
- <table class="collapse">
164
- <thead>
165
- <tr>
166
- <th role="none"></th>
167
-
168
- <th class="pa-2 tc ff-mono">100</th>
169
-
170
- <th class="pa-2 tc ff-mono">200</th>
171
-
172
- <th class="pa-2 tc ff-mono">300</th>
173
-
174
- <th class="pa-2 tc ff-mono">400</th>
175
-
176
- <th class="pa-2 tc ff-mono">500</th>
177
-
178
- <th class="pa-2 tc ff-mono">600</th>
179
-
180
- <th class="pa-2 tc ff-mono">700</th>
181
-
182
- <th class="pa-2 tc ff-mono">800</th>
183
-
184
- <th class="pa-2 tc ff-mono">900</th>
185
-
186
- </tr>
187
- </thead>
188
-
189
-
190
- <tr>
191
- <th class="pa-2 tr ff-mono">Red</th>
192
-
193
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-red-100">&nbsp;</div></td>
194
-
195
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-red-200">&nbsp;</div></td>
196
-
197
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-red-300">&nbsp;</div></td>
198
-
199
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-red-400">&nbsp;</div></td>
200
-
201
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-red-500">&nbsp;</div></td>
202
-
203
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-red-600">&nbsp;</div></td>
204
-
205
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-red-700">&nbsp;</div></td>
206
-
207
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-red-800">&nbsp;</div></td>
208
-
209
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-red-900">&nbsp;</div></td>
210
-
211
- </tr>
212
-
213
-
214
- <tr>
215
- <th class="pa-2 tr ff-mono">Orange</th>
216
-
217
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-orange-100">&nbsp;</div></td>
218
-
219
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-orange-200">&nbsp;</div></td>
220
-
221
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-orange-300">&nbsp;</div></td>
222
-
223
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-orange-400">&nbsp;</div></td>
224
-
225
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-orange-500">&nbsp;</div></td>
226
-
227
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-orange-600">&nbsp;</div></td>
228
-
229
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-orange-700">&nbsp;</div></td>
230
-
231
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-orange-800">&nbsp;</div></td>
232
-
233
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-orange-900">&nbsp;</div></td>
234
-
235
- </tr>
236
-
237
-
238
- <tr>
239
- <th class="pa-2 tr ff-mono">Yellow</th>
240
-
241
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-yellow-100">&nbsp;</div></td>
242
-
243
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-yellow-200">&nbsp;</div></td>
244
-
245
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-yellow-300">&nbsp;</div></td>
246
-
247
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-yellow-400">&nbsp;</div></td>
248
-
249
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-yellow-500">&nbsp;</div></td>
250
-
251
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-yellow-600">&nbsp;</div></td>
252
-
253
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-yellow-700">&nbsp;</div></td>
254
-
255
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-yellow-800">&nbsp;</div></td>
256
-
257
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-yellow-900">&nbsp;</div></td>
258
-
259
- </tr>
260
-
261
-
262
- <tr>
263
- <th class="pa-2 tr ff-mono">Green</th>
264
-
265
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-green-100">&nbsp;</div></td>
266
-
267
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-green-200">&nbsp;</div></td>
268
-
269
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-green-300">&nbsp;</div></td>
270
-
271
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-green-400">&nbsp;</div></td>
272
-
273
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-green-500">&nbsp;</div></td>
274
-
275
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-green-600">&nbsp;</div></td>
276
-
277
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-green-700">&nbsp;</div></td>
278
-
279
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-green-800">&nbsp;</div></td>
280
-
281
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-green-900">&nbsp;</div></td>
282
-
283
- </tr>
284
-
285
-
286
- <tr>
287
- <th class="pa-2 tr ff-mono">Blue</th>
288
-
289
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-blue-100">&nbsp;</div></td>
290
-
291
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-blue-200">&nbsp;</div></td>
292
-
293
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-blue-300">&nbsp;</div></td>
294
-
295
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-blue-400">&nbsp;</div></td>
296
-
297
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-blue-500">&nbsp;</div></td>
298
-
299
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-blue-600">&nbsp;</div></td>
300
-
301
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-blue-700">&nbsp;</div></td>
302
-
303
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-blue-800">&nbsp;</div></td>
304
-
305
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-blue-900">&nbsp;</div></td>
306
-
307
- </tr>
308
-
309
-
310
- <tr>
311
- <th class="pa-2 tr ff-mono">Purple</th>
312
-
313
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-purple-100">&nbsp;</div></td>
314
-
315
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-purple-200">&nbsp;</div></td>
316
-
317
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-purple-300">&nbsp;</div></td>
318
-
319
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-purple-400">&nbsp;</div></td>
320
-
321
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-purple-500">&nbsp;</div></td>
322
-
323
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-purple-600">&nbsp;</div></td>
324
-
325
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-purple-700">&nbsp;</div></td>
326
-
327
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-purple-800">&nbsp;</div></td>
328
-
329
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-purple-900">&nbsp;</div></td>
330
-
331
- </tr>
332
-
333
-
334
- <tr>
335
- <th class="pa-2 tr ff-mono">Gray</th>
336
-
337
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-gray-100">&nbsp;</div></td>
338
-
339
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-gray-200">&nbsp;</div></td>
340
-
341
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-gray-300">&nbsp;</div></td>
342
-
343
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-gray-400">&nbsp;</div></td>
344
-
345
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-gray-500">&nbsp;</div></td>
346
-
347
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-gray-600">&nbsp;</div></td>
348
-
349
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-gray-700">&nbsp;</div></td>
350
-
351
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-gray-800">&nbsp;</div></td>
352
-
353
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-gray-900">&nbsp;</div></td>
354
-
355
- </tr>
356
-
357
-
358
- <thead>
359
- <tr>
360
- <th role="none"></th>
361
- <th class="pa-2 tc"><em class="fw-normal">pure</em></th>
362
- <th class="pa-2 tc ff-mono">-ish</th>
363
- </tr>
364
- </thead>
365
-
366
- <tr>
367
- <th class="pa-2 tr ff-mono">Black</th>
368
-
369
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-black">&nbsp;</div></td>
370
-
371
- <td class="pa-2"><div class="br-3 w-4 h-3 bg-black-ish">&nbsp;</div></td>
372
-
373
- </tr>
374
-
375
-
376
- <tr>
377
- <th class="pa-2 tr ff-mono">White</th>
378
-
379
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-white">&nbsp;</div></td>
380
-
381
- <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-white-ish">&nbsp;</div></td>
382
-
383
- </tr>
384
-
385
- </table>
386
- </div>
387
-
388
-
389
-
390
- <h3 class="f-2 b">See Also</h3>
391
- <ul class="see-also">
392
-
393
- <li><p><a href="/brut-css/properties/colors.html">Colors</a></p>
394
- </li>
395
-
396
- </ul>
397
-
398
-
399
- <h3 class="f-5 mt-4" id="class-scale:foreground-red">Red</h3>
400
- <p class="p">
401
- <p>Red shades.</p>
402
-
403
- </p>
404
-
405
- <h4 class="f-2 b">See Also</h3>
406
- <ul class="see-also">
407
-
408
- <li><p><a href="/brut-css/properties/colors.html#property-scale:red">Red</a></p>
409
- </li>
410
-
411
- </ul>
412
-
413
-
414
- <div class="mt-4 flex gap-3 items-center justify-between" id="red-100">
415
- <h4 class="f-4 fw-3 ws-nowrap"><code>.red-100</code></h4>
416
- <pre class="f-3 highlighted-code"><span class="token selector">.red-100</span> <span class="token punctuation">{</span>
417
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
418
- <span class="token punctuation">}</span></pre>
419
- </div>
420
- <div class="ml-3">
421
- <p class="p">
422
- <p>Red at weight 100 (darkest).</p>
423
-
424
- </p>
425
-
426
-
427
- <h5 class="f-2 ttu">
428
-
429
- Example
430
-
431
- </h5>
432
-
433
-
434
- <div class="mv-3 example">
435
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
436
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
437
- .red-100
438
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
439
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
440
- <div class="example-demonstration">
441
-
442
- <div class="bg-white pa-2">
443
- <code class="red-100">
444
- .red-100
445
- </code>
446
- </div>
447
-
448
- </div>
449
- </div>
450
-
451
-
452
- </div>
453
-
454
- <div class="mt-4 flex gap-3 items-center justify-between" id="red-200">
455
- <h4 class="f-4 fw-3 ws-nowrap"><code>.red-200</code></h4>
456
- <pre class="f-3 highlighted-code"><span class="token selector">.red-200</span> <span class="token punctuation">{</span>
457
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
458
- <span class="token punctuation">}</span></pre>
459
- </div>
460
- <div class="ml-3">
461
- <p class="p">
462
- <p>Red at weight 200 (second darkest).</p>
463
-
464
- </p>
465
-
466
-
467
- <h5 class="f-2 ttu">
468
-
469
- Example
470
-
471
- </h5>
472
-
473
-
474
- <div class="mv-3 example">
475
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
476
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
477
- .red-200
478
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
479
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
480
- <div class="example-demonstration">
481
-
482
- <div class="bg-white pa-2">
483
- <code class="red-200">
484
- .red-200
485
- </code>
486
- </div>
487
-
488
- </div>
489
- </div>
490
-
491
-
492
- </div>
493
-
494
- <div class="mt-4 flex gap-3 items-center justify-between" id="red-300">
495
- <h4 class="f-4 fw-3 ws-nowrap"><code>.red-300</code></h4>
496
- <pre class="f-3 highlighted-code"><span class="token selector">.red-300</span> <span class="token punctuation">{</span>
497
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
498
- <span class="token punctuation">}</span></pre>
499
- </div>
500
- <div class="ml-3">
501
- <p class="p">
502
- <p>Red at weight 300.</p>
503
-
504
- </p>
505
-
506
-
507
- <h5 class="f-2 ttu">
508
-
509
- Example
510
-
511
- </h5>
512
-
513
-
514
- <div class="mv-3 example">
515
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
516
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
517
- .red-300
518
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
519
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
520
- <div class="example-demonstration">
521
-
522
- <div class="bg-white pa-2">
523
- <code class="red-300">
524
- .red-300
525
- </code>
526
- </div>
527
-
528
- </div>
529
- </div>
530
-
531
-
532
- </div>
533
-
534
- <div class="mt-4 flex gap-3 items-center justify-between" id="red-400">
535
- <h4 class="f-4 fw-3 ws-nowrap"><code>.red-400</code></h4>
536
- <pre class="f-3 highlighted-code"><span class="token selector">.red-400</span> <span class="token punctuation">{</span>
537
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
538
- <span class="token punctuation">}</span></pre>
539
- </div>
540
- <div class="ml-3">
541
- <p class="p">
542
- <p>Red at weight 400.</p>
543
-
544
- </p>
545
-
546
-
547
- <h5 class="f-2 ttu">
548
-
549
- Example
550
-
551
- </h5>
552
-
553
-
554
- <div class="mv-3 example">
555
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
556
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
557
- .red-400
558
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
559
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
560
- <div class="example-demonstration">
561
-
562
- <div class="bg-white pa-2">
563
- <code class="red-400">
564
- .red-400
565
- </code>
566
- </div>
567
-
568
- </div>
569
- </div>
570
-
571
-
572
- </div>
573
-
574
- <div class="mt-4 flex gap-3 items-center justify-between" id="red-500">
575
- <h4 class="f-4 fw-3 ws-nowrap"><code>.red-500</code></h4>
576
- <pre class="f-3 highlighted-code"><span class="token selector">.red-500</span> <span class="token punctuation">{</span>
577
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
578
- <span class="token punctuation">}</span></pre>
579
- </div>
580
- <div class="ml-3">
581
- <p class="p">
582
- <p>Red at weight 500.</p>
583
-
584
- </p>
585
-
586
-
587
- <h5 class="f-2 ttu">
588
-
589
- Example
590
-
591
- </h5>
592
-
593
-
594
- <div class="mv-3 example">
595
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
596
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
597
- .red-500
598
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
599
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
600
- <div class="example-demonstration">
601
-
602
- <div class="bg-black pa-2">
603
- <code class="red-500">
604
- .red-500
605
- </code>
606
- </div>
607
-
608
- </div>
609
- </div>
610
-
611
-
612
- </div>
613
-
614
- <div class="mt-4 flex gap-3 items-center justify-between" id="red-600">
615
- <h4 class="f-4 fw-3 ws-nowrap"><code>.red-600</code></h4>
616
- <pre class="f-3 highlighted-code"><span class="token selector">.red-600</span> <span class="token punctuation">{</span>
617
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
618
- <span class="token punctuation">}</span></pre>
619
- </div>
620
- <div class="ml-3">
621
- <p class="p">
622
- <p>Red at weight 600 ().</p>
623
-
624
- </p>
625
-
626
-
627
- <h5 class="f-2 ttu">
628
-
629
- Example
630
-
631
- </h5>
632
-
633
-
634
- <div class="mv-3 example">
635
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
636
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
637
- .red-600
638
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
639
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
640
- <div class="example-demonstration">
641
-
642
- <div class="bg-black pa-2">
643
- <code class="red-600">
644
- .red-600
645
- </code>
646
- </div>
647
-
648
- </div>
649
- </div>
650
-
651
-
652
- </div>
653
-
654
- <div class="mt-4 flex gap-3 items-center justify-between" id="red-700">
655
- <h4 class="f-4 fw-3 ws-nowrap"><code>.red-700</code></h4>
656
- <pre class="f-3 highlighted-code"><span class="token selector">.red-700</span> <span class="token punctuation">{</span>
657
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
658
- <span class="token punctuation">}</span></pre>
659
- </div>
660
- <div class="ml-3">
661
- <p class="p">
662
- <p>Red at weight 700 ().</p>
663
-
664
- </p>
665
-
666
-
667
- <h5 class="f-2 ttu">
668
-
669
- Example
670
-
671
- </h5>
672
-
673
-
674
- <div class="mv-3 example">
675
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
676
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-700<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
677
- .red-700
678
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
679
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
680
- <div class="example-demonstration">
681
-
682
- <div class="bg-black pa-2">
683
- <code class="red-700">
684
- .red-700
685
- </code>
686
- </div>
687
-
688
- </div>
689
- </div>
690
-
691
-
692
- </div>
693
-
694
- <div class="mt-4 flex gap-3 items-center justify-between" id="red-800">
695
- <h4 class="f-4 fw-3 ws-nowrap"><code>.red-800</code></h4>
696
- <pre class="f-3 highlighted-code"><span class="token selector">.red-800</span> <span class="token punctuation">{</span>
697
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
698
- <span class="token punctuation">}</span></pre>
699
- </div>
700
- <div class="ml-3">
701
- <p class="p">
702
- <p>Red at weight 800 (second lightest).</p>
703
-
704
- </p>
705
-
706
-
707
- <h5 class="f-2 ttu">
708
-
709
- Example
710
-
711
- </h5>
712
-
713
-
714
- <div class="mv-3 example">
715
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
716
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
717
- .red-800
718
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
719
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
720
- <div class="example-demonstration">
721
-
722
- <div class="bg-black pa-2">
723
- <code class="red-800">
724
- .red-800
725
- </code>
726
- </div>
727
-
728
- </div>
729
- </div>
730
-
731
-
732
- </div>
733
-
734
- <div class="mt-4 flex gap-3 items-center justify-between" id="red-900">
735
- <h4 class="f-4 fw-3 ws-nowrap"><code>.red-900</code></h4>
736
- <pre class="f-3 highlighted-code"><span class="token selector">.red-900</span> <span class="token punctuation">{</span>
737
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
738
- <span class="token punctuation">}</span></pre>
739
- </div>
740
- <div class="ml-3">
741
- <p class="p">
742
- <p>Red at weight 900 (lightest).</p>
743
-
744
- </p>
745
-
746
-
747
- <h5 class="f-2 ttu">
748
-
749
- Example
750
-
751
- </h5>
752
-
753
-
754
- <div class="mv-3 example">
755
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
756
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-900<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
757
- .red-900
758
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
759
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
760
- <div class="example-demonstration">
761
-
762
- <div class="bg-black pa-2">
763
- <code class="red-900">
764
- .red-900
765
- </code>
766
- </div>
767
-
768
- </div>
769
- </div>
770
-
771
-
772
- </div>
773
-
774
-
775
- <h3 class="f-5 mt-4" id="class-scale:foreground-orange">Orange</h3>
776
- <p class="p">
777
- <p>Orange shades.</p>
778
-
779
- </p>
780
-
781
- <h4 class="f-2 b">See Also</h3>
782
- <ul class="see-also">
783
-
784
- <li><p><a href="/brut-css/properties/colors.html#property-scale:orange">Orange</a></p>
785
- </li>
786
-
787
- </ul>
788
-
789
-
790
- <div class="mt-4 flex gap-3 items-center justify-between" id="orange-100">
791
- <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-100</code></h4>
792
- <pre class="f-3 highlighted-code"><span class="token selector">.orange-100</span> <span class="token punctuation">{</span>
793
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
794
- <span class="token punctuation">}</span></pre>
795
- </div>
796
- <div class="ml-3">
797
- <p class="p">
798
- <p>Orange at weight 100 (darkest).</p>
799
-
800
- </p>
801
-
802
-
803
- <h5 class="f-2 ttu">
804
-
805
- Example
806
-
807
- </h5>
808
-
809
-
810
- <div class="mv-3 example">
811
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
812
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
813
- .orange-100
814
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
815
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
816
- <div class="example-demonstration">
817
-
818
- <div class="bg-white pa-2">
819
- <code class="orange-100">
820
- .orange-100
821
- </code>
822
- </div>
823
-
824
- </div>
825
- </div>
826
-
827
-
828
- </div>
829
-
830
- <div class="mt-4 flex gap-3 items-center justify-between" id="orange-200">
831
- <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-200</code></h4>
832
- <pre class="f-3 highlighted-code"><span class="token selector">.orange-200</span> <span class="token punctuation">{</span>
833
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
834
- <span class="token punctuation">}</span></pre>
835
- </div>
836
- <div class="ml-3">
837
- <p class="p">
838
- <p>Orange at weight 200 (second darkest).</p>
839
-
840
- </p>
841
-
842
-
843
- <h5 class="f-2 ttu">
844
-
845
- Example
846
-
847
- </h5>
848
-
849
-
850
- <div class="mv-3 example">
851
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
852
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
853
- .orange-200
854
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
855
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
856
- <div class="example-demonstration">
857
-
858
- <div class="bg-white pa-2">
859
- <code class="orange-200">
860
- .orange-200
861
- </code>
862
- </div>
863
-
864
- </div>
865
- </div>
866
-
867
-
868
- </div>
869
-
870
- <div class="mt-4 flex gap-3 items-center justify-between" id="orange-300">
871
- <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-300</code></h4>
872
- <pre class="f-3 highlighted-code"><span class="token selector">.orange-300</span> <span class="token punctuation">{</span>
873
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
874
- <span class="token punctuation">}</span></pre>
875
- </div>
876
- <div class="ml-3">
877
- <p class="p">
878
- <p>Orange at weight 300.</p>
879
-
880
- </p>
881
-
882
-
883
- <h5 class="f-2 ttu">
884
-
885
- Example
886
-
887
- </h5>
888
-
889
-
890
- <div class="mv-3 example">
891
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
892
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
893
- .orange-300
894
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
895
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
896
- <div class="example-demonstration">
897
-
898
- <div class="bg-white pa-2">
899
- <code class="orange-300">
900
- .orange-300
901
- </code>
902
- </div>
903
-
904
- </div>
905
- </div>
906
-
907
-
908
- </div>
909
-
910
- <div class="mt-4 flex gap-3 items-center justify-between" id="orange-400">
911
- <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-400</code></h4>
912
- <pre class="f-3 highlighted-code"><span class="token selector">.orange-400</span> <span class="token punctuation">{</span>
913
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
914
- <span class="token punctuation">}</span></pre>
915
- </div>
916
- <div class="ml-3">
917
- <p class="p">
918
- <p>Orange at weight 400.</p>
919
-
920
- </p>
921
-
922
-
923
- <h5 class="f-2 ttu">
924
-
925
- Example
926
-
927
- </h5>
928
-
929
-
930
- <div class="mv-3 example">
931
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
932
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
933
- .orange-400
934
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
935
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
936
- <div class="example-demonstration">
937
-
938
- <div class="bg-white pa-2">
939
- <code class="orange-400">
940
- .orange-400
941
- </code>
942
- </div>
943
-
944
- </div>
945
- </div>
946
-
947
-
948
- </div>
949
-
950
- <div class="mt-4 flex gap-3 items-center justify-between" id="orange-500">
951
- <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-500</code></h4>
952
- <pre class="f-3 highlighted-code"><span class="token selector">.orange-500</span> <span class="token punctuation">{</span>
953
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
954
- <span class="token punctuation">}</span></pre>
955
- </div>
956
- <div class="ml-3">
957
- <p class="p">
958
- <p>Orange at weight 500.</p>
959
-
960
- </p>
961
-
962
-
963
- <h5 class="f-2 ttu">
964
-
965
- Example
966
-
967
- </h5>
968
-
969
-
970
- <div class="mv-3 example">
971
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
972
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
973
- .orange-500
974
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
975
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
976
- <div class="example-demonstration">
977
-
978
- <div class="bg-black pa-2">
979
- <code class="orange-500">
980
- .orange-500
981
- </code>
982
- </div>
983
-
984
- </div>
985
- </div>
986
-
987
-
988
- </div>
989
-
990
- <div class="mt-4 flex gap-3 items-center justify-between" id="orange-600">
991
- <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-600</code></h4>
992
- <pre class="f-3 highlighted-code"><span class="token selector">.orange-600</span> <span class="token punctuation">{</span>
993
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
994
- <span class="token punctuation">}</span></pre>
995
- </div>
996
- <div class="ml-3">
997
- <p class="p">
998
- <p>Orange at weight 600 ().</p>
999
-
1000
- </p>
1001
-
1002
-
1003
- <h5 class="f-2 ttu">
1004
-
1005
- Example
1006
-
1007
- </h5>
1008
-
1009
-
1010
- <div class="mv-3 example">
1011
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1012
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1013
- .orange-600
1014
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1015
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1016
- <div class="example-demonstration">
1017
-
1018
- <div class="bg-black pa-2">
1019
- <code class="orange-600">
1020
- .orange-600
1021
- </code>
1022
- </div>
1023
-
1024
- </div>
1025
- </div>
1026
-
1027
-
1028
- </div>
1029
-
1030
- <div class="mt-4 flex gap-3 items-center justify-between" id="orange-700">
1031
- <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-700</code></h4>
1032
- <pre class="f-3 highlighted-code"><span class="token selector">.orange-700</span> <span class="token punctuation">{</span>
1033
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
1034
- <span class="token punctuation">}</span></pre>
1035
- </div>
1036
- <div class="ml-3">
1037
- <p class="p">
1038
- <p>Orange at weight 700 ().</p>
1039
-
1040
- </p>
1041
-
1042
-
1043
- <h5 class="f-2 ttu">
1044
-
1045
- Example
1046
-
1047
- </h5>
1048
-
1049
-
1050
- <div class="mv-3 example">
1051
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1052
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-700<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1053
- .orange-700
1054
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1055
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1056
- <div class="example-demonstration">
1057
-
1058
- <div class="bg-black pa-2">
1059
- <code class="orange-700">
1060
- .orange-700
1061
- </code>
1062
- </div>
1063
-
1064
- </div>
1065
- </div>
1066
-
1067
-
1068
- </div>
1069
-
1070
- <div class="mt-4 flex gap-3 items-center justify-between" id="orange-800">
1071
- <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-800</code></h4>
1072
- <pre class="f-3 highlighted-code"><span class="token selector">.orange-800</span> <span class="token punctuation">{</span>
1073
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
1074
- <span class="token punctuation">}</span></pre>
1075
- </div>
1076
- <div class="ml-3">
1077
- <p class="p">
1078
- <p>Orange at weight 800 (second lightest).</p>
1079
-
1080
- </p>
1081
-
1082
-
1083
- <h5 class="f-2 ttu">
1084
-
1085
- Example
1086
-
1087
- </h5>
1088
-
1089
-
1090
- <div class="mv-3 example">
1091
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1092
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1093
- .orange-800
1094
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1095
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1096
- <div class="example-demonstration">
1097
-
1098
- <div class="bg-black pa-2">
1099
- <code class="orange-800">
1100
- .orange-800
1101
- </code>
1102
- </div>
1103
-
1104
- </div>
1105
- </div>
1106
-
1107
-
1108
- </div>
1109
-
1110
- <div class="mt-4 flex gap-3 items-center justify-between" id="orange-900">
1111
- <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-900</code></h4>
1112
- <pre class="f-3 highlighted-code"><span class="token selector">.orange-900</span> <span class="token punctuation">{</span>
1113
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
1114
- <span class="token punctuation">}</span></pre>
1115
- </div>
1116
- <div class="ml-3">
1117
- <p class="p">
1118
- <p>Orange at weight 900 (lightest).</p>
1119
-
1120
- </p>
1121
-
1122
-
1123
- <h5 class="f-2 ttu">
1124
-
1125
- Example
1126
-
1127
- </h5>
1128
-
1129
-
1130
- <div class="mv-3 example">
1131
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1132
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-900<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1133
- .orange-900
1134
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1135
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1136
- <div class="example-demonstration">
1137
-
1138
- <div class="bg-black pa-2">
1139
- <code class="orange-900">
1140
- .orange-900
1141
- </code>
1142
- </div>
1143
-
1144
- </div>
1145
- </div>
1146
-
1147
-
1148
- </div>
1149
-
1150
-
1151
- <h3 class="f-5 mt-4" id="class-scale:foreground-yellow">Yellow</h3>
1152
- <p class="p">
1153
- <p>Yellow shades.</p>
1154
-
1155
- </p>
1156
-
1157
- <h4 class="f-2 b">See Also</h3>
1158
- <ul class="see-also">
1159
-
1160
- <li><p><a href="/brut-css/properties/colors.html#property-scale:yellow">Yellow</a></p>
1161
- </li>
1162
-
1163
- </ul>
1164
-
1165
-
1166
- <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-100">
1167
- <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-100</code></h4>
1168
- <pre class="f-3 highlighted-code"><span class="token selector">.yellow-100</span> <span class="token punctuation">{</span>
1169
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
1170
- <span class="token punctuation">}</span></pre>
1171
- </div>
1172
- <div class="ml-3">
1173
- <p class="p">
1174
- <p>Yellow at weight 100 (darkest).</p>
1175
-
1176
- </p>
1177
-
1178
-
1179
- <h5 class="f-2 ttu">
1180
-
1181
- Example
1182
-
1183
- </h5>
1184
-
1185
-
1186
- <div class="mv-3 example">
1187
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1188
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1189
- .yellow-100
1190
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1191
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1192
- <div class="example-demonstration">
1193
-
1194
- <div class="bg-white pa-2">
1195
- <code class="yellow-100">
1196
- .yellow-100
1197
- </code>
1198
- </div>
1199
-
1200
- </div>
1201
- </div>
1202
-
1203
-
1204
- </div>
1205
-
1206
- <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-200">
1207
- <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-200</code></h4>
1208
- <pre class="f-3 highlighted-code"><span class="token selector">.yellow-200</span> <span class="token punctuation">{</span>
1209
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
1210
- <span class="token punctuation">}</span></pre>
1211
- </div>
1212
- <div class="ml-3">
1213
- <p class="p">
1214
- <p>Yellow at weight 200 (second darkest).</p>
1215
-
1216
- </p>
1217
-
1218
-
1219
- <h5 class="f-2 ttu">
1220
-
1221
- Example
1222
-
1223
- </h5>
1224
-
1225
-
1226
- <div class="mv-3 example">
1227
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1228
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1229
- .yellow-200
1230
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1231
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1232
- <div class="example-demonstration">
1233
-
1234
- <div class="bg-white pa-2">
1235
- <code class="yellow-200">
1236
- .yellow-200
1237
- </code>
1238
- </div>
1239
-
1240
- </div>
1241
- </div>
1242
-
1243
-
1244
- </div>
1245
-
1246
- <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-300">
1247
- <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-300</code></h4>
1248
- <pre class="f-3 highlighted-code"><span class="token selector">.yellow-300</span> <span class="token punctuation">{</span>
1249
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
1250
- <span class="token punctuation">}</span></pre>
1251
- </div>
1252
- <div class="ml-3">
1253
- <p class="p">
1254
- <p>Yellow at weight 300.</p>
1255
-
1256
- </p>
1257
-
1258
-
1259
- <h5 class="f-2 ttu">
1260
-
1261
- Example
1262
-
1263
- </h5>
1264
-
1265
-
1266
- <div class="mv-3 example">
1267
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1268
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1269
- .yellow-300
1270
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1271
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1272
- <div class="example-demonstration">
1273
-
1274
- <div class="bg-white pa-2">
1275
- <code class="yellow-300">
1276
- .yellow-300
1277
- </code>
1278
- </div>
1279
-
1280
- </div>
1281
- </div>
1282
-
1283
-
1284
- </div>
1285
-
1286
- <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-400">
1287
- <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-400</code></h4>
1288
- <pre class="f-3 highlighted-code"><span class="token selector">.yellow-400</span> <span class="token punctuation">{</span>
1289
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
1290
- <span class="token punctuation">}</span></pre>
1291
- </div>
1292
- <div class="ml-3">
1293
- <p class="p">
1294
- <p>Yellow at weight 400.</p>
1295
-
1296
- </p>
1297
-
1298
-
1299
- <h5 class="f-2 ttu">
1300
-
1301
- Example
1302
-
1303
- </h5>
1304
-
1305
-
1306
- <div class="mv-3 example">
1307
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1308
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1309
- .yellow-400
1310
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1311
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1312
- <div class="example-demonstration">
1313
-
1314
- <div class="bg-white pa-2">
1315
- <code class="yellow-400">
1316
- .yellow-400
1317
- </code>
1318
- </div>
1319
-
1320
- </div>
1321
- </div>
1322
-
1323
-
1324
- </div>
1325
-
1326
- <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-500">
1327
- <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-500</code></h4>
1328
- <pre class="f-3 highlighted-code"><span class="token selector">.yellow-500</span> <span class="token punctuation">{</span>
1329
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
1330
- <span class="token punctuation">}</span></pre>
1331
- </div>
1332
- <div class="ml-3">
1333
- <p class="p">
1334
- <p>Yellow at weight 500.</p>
1335
-
1336
- </p>
1337
-
1338
-
1339
- <h5 class="f-2 ttu">
1340
-
1341
- Example
1342
-
1343
- </h5>
1344
-
1345
-
1346
- <div class="mv-3 example">
1347
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1348
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1349
- .yellow-500
1350
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1351
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1352
- <div class="example-demonstration">
1353
-
1354
- <div class="bg-black pa-2">
1355
- <code class="yellow-500">
1356
- .yellow-500
1357
- </code>
1358
- </div>
1359
-
1360
- </div>
1361
- </div>
1362
-
1363
-
1364
- </div>
1365
-
1366
- <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-600">
1367
- <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-600</code></h4>
1368
- <pre class="f-3 highlighted-code"><span class="token selector">.yellow-600</span> <span class="token punctuation">{</span>
1369
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
1370
- <span class="token punctuation">}</span></pre>
1371
- </div>
1372
- <div class="ml-3">
1373
- <p class="p">
1374
- <p>Yellow at weight 600 ().</p>
1375
-
1376
- </p>
1377
-
1378
-
1379
- <h5 class="f-2 ttu">
1380
-
1381
- Example
1382
-
1383
- </h5>
1384
-
1385
-
1386
- <div class="mv-3 example">
1387
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1388
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1389
- .yellow-600
1390
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1391
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1392
- <div class="example-demonstration">
1393
-
1394
- <div class="bg-black pa-2">
1395
- <code class="yellow-600">
1396
- .yellow-600
1397
- </code>
1398
- </div>
1399
-
1400
- </div>
1401
- </div>
1402
-
1403
-
1404
- </div>
1405
-
1406
- <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-700">
1407
- <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-700</code></h4>
1408
- <pre class="f-3 highlighted-code"><span class="token selector">.yellow-700</span> <span class="token punctuation">{</span>
1409
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
1410
- <span class="token punctuation">}</span></pre>
1411
- </div>
1412
- <div class="ml-3">
1413
- <p class="p">
1414
- <p>Yellow at weight 700 ().</p>
1415
-
1416
- </p>
1417
-
1418
-
1419
- <h5 class="f-2 ttu">
1420
-
1421
- Example
1422
-
1423
- </h5>
1424
-
1425
-
1426
- <div class="mv-3 example">
1427
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1428
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-700<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1429
- .yellow-700
1430
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1431
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1432
- <div class="example-demonstration">
1433
-
1434
- <div class="bg-black pa-2">
1435
- <code class="yellow-700">
1436
- .yellow-700
1437
- </code>
1438
- </div>
1439
-
1440
- </div>
1441
- </div>
1442
-
1443
-
1444
- </div>
1445
-
1446
- <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-800">
1447
- <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-800</code></h4>
1448
- <pre class="f-3 highlighted-code"><span class="token selector">.yellow-800</span> <span class="token punctuation">{</span>
1449
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
1450
- <span class="token punctuation">}</span></pre>
1451
- </div>
1452
- <div class="ml-3">
1453
- <p class="p">
1454
- <p>Yellow at weight 800 (second lightest).</p>
1455
-
1456
- </p>
1457
-
1458
-
1459
- <h5 class="f-2 ttu">
1460
-
1461
- Example
1462
-
1463
- </h5>
1464
-
1465
-
1466
- <div class="mv-3 example">
1467
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1468
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1469
- .yellow-800
1470
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1471
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1472
- <div class="example-demonstration">
1473
-
1474
- <div class="bg-black pa-2">
1475
- <code class="yellow-800">
1476
- .yellow-800
1477
- </code>
1478
- </div>
1479
-
1480
- </div>
1481
- </div>
1482
-
1483
-
1484
- </div>
1485
-
1486
- <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-900">
1487
- <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-900</code></h4>
1488
- <pre class="f-3 highlighted-code"><span class="token selector">.yellow-900</span> <span class="token punctuation">{</span>
1489
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
1490
- <span class="token punctuation">}</span></pre>
1491
- </div>
1492
- <div class="ml-3">
1493
- <p class="p">
1494
- <p>Yellow at weight 900 (lightest).</p>
1495
-
1496
- </p>
1497
-
1498
-
1499
- <h5 class="f-2 ttu">
1500
-
1501
- Example
1502
-
1503
- </h5>
1504
-
1505
-
1506
- <div class="mv-3 example">
1507
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1508
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-900<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1509
- .yellow-900
1510
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1511
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1512
- <div class="example-demonstration">
1513
-
1514
- <div class="bg-black pa-2">
1515
- <code class="yellow-900">
1516
- .yellow-900
1517
- </code>
1518
- </div>
1519
-
1520
- </div>
1521
- </div>
1522
-
1523
-
1524
- </div>
1525
-
1526
-
1527
- <h3 class="f-5 mt-4" id="class-scale:foreground-green">Green</h3>
1528
- <p class="p">
1529
- <p>Green shades.</p>
1530
-
1531
- </p>
1532
-
1533
- <h4 class="f-2 b">See Also</h3>
1534
- <ul class="see-also">
1535
-
1536
- <li><p><a href="/brut-css/properties/colors.html#property-scale:green">Green</a></p>
1537
- </li>
1538
-
1539
- </ul>
1540
-
1541
-
1542
- <div class="mt-4 flex gap-3 items-center justify-between" id="green-100">
1543
- <h4 class="f-4 fw-3 ws-nowrap"><code>.green-100</code></h4>
1544
- <pre class="f-3 highlighted-code"><span class="token selector">.green-100</span> <span class="token punctuation">{</span>
1545
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
1546
- <span class="token punctuation">}</span></pre>
1547
- </div>
1548
- <div class="ml-3">
1549
- <p class="p">
1550
- <p>Green at weight 100 (darkest).</p>
1551
-
1552
- </p>
1553
-
1554
-
1555
- <h5 class="f-2 ttu">
1556
-
1557
- Example
1558
-
1559
- </h5>
1560
-
1561
-
1562
- <div class="mv-3 example">
1563
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1564
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1565
- .green-100
1566
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1567
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1568
- <div class="example-demonstration">
1569
-
1570
- <div class="bg-white pa-2">
1571
- <code class="green-100">
1572
- .green-100
1573
- </code>
1574
- </div>
1575
-
1576
- </div>
1577
- </div>
1578
-
1579
-
1580
- </div>
1581
-
1582
- <div class="mt-4 flex gap-3 items-center justify-between" id="green-200">
1583
- <h4 class="f-4 fw-3 ws-nowrap"><code>.green-200</code></h4>
1584
- <pre class="f-3 highlighted-code"><span class="token selector">.green-200</span> <span class="token punctuation">{</span>
1585
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
1586
- <span class="token punctuation">}</span></pre>
1587
- </div>
1588
- <div class="ml-3">
1589
- <p class="p">
1590
- <p>Green at weight 200 (second darkest).</p>
1591
-
1592
- </p>
1593
-
1594
-
1595
- <h5 class="f-2 ttu">
1596
-
1597
- Example
1598
-
1599
- </h5>
1600
-
1601
-
1602
- <div class="mv-3 example">
1603
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1604
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1605
- .green-200
1606
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1607
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1608
- <div class="example-demonstration">
1609
-
1610
- <div class="bg-white pa-2">
1611
- <code class="green-200">
1612
- .green-200
1613
- </code>
1614
- </div>
1615
-
1616
- </div>
1617
- </div>
1618
-
1619
-
1620
- </div>
1621
-
1622
- <div class="mt-4 flex gap-3 items-center justify-between" id="green-300">
1623
- <h4 class="f-4 fw-3 ws-nowrap"><code>.green-300</code></h4>
1624
- <pre class="f-3 highlighted-code"><span class="token selector">.green-300</span> <span class="token punctuation">{</span>
1625
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
1626
- <span class="token punctuation">}</span></pre>
1627
- </div>
1628
- <div class="ml-3">
1629
- <p class="p">
1630
- <p>Green at weight 300.</p>
1631
-
1632
- </p>
1633
-
1634
-
1635
- <h5 class="f-2 ttu">
1636
-
1637
- Example
1638
-
1639
- </h5>
1640
-
1641
-
1642
- <div class="mv-3 example">
1643
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1644
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1645
- .green-300
1646
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1647
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1648
- <div class="example-demonstration">
1649
-
1650
- <div class="bg-white pa-2">
1651
- <code class="green-300">
1652
- .green-300
1653
- </code>
1654
- </div>
1655
-
1656
- </div>
1657
- </div>
1658
-
1659
-
1660
- </div>
1661
-
1662
- <div class="mt-4 flex gap-3 items-center justify-between" id="green-400">
1663
- <h4 class="f-4 fw-3 ws-nowrap"><code>.green-400</code></h4>
1664
- <pre class="f-3 highlighted-code"><span class="token selector">.green-400</span> <span class="token punctuation">{</span>
1665
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
1666
- <span class="token punctuation">}</span></pre>
1667
- </div>
1668
- <div class="ml-3">
1669
- <p class="p">
1670
- <p>Green at weight 400.</p>
1671
-
1672
- </p>
1673
-
1674
-
1675
- <h5 class="f-2 ttu">
1676
-
1677
- Example
1678
-
1679
- </h5>
1680
-
1681
-
1682
- <div class="mv-3 example">
1683
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1684
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1685
- .green-400
1686
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1687
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1688
- <div class="example-demonstration">
1689
-
1690
- <div class="bg-white pa-2">
1691
- <code class="green-400">
1692
- .green-400
1693
- </code>
1694
- </div>
1695
-
1696
- </div>
1697
- </div>
1698
-
1699
-
1700
- </div>
1701
-
1702
- <div class="mt-4 flex gap-3 items-center justify-between" id="green-500">
1703
- <h4 class="f-4 fw-3 ws-nowrap"><code>.green-500</code></h4>
1704
- <pre class="f-3 highlighted-code"><span class="token selector">.green-500</span> <span class="token punctuation">{</span>
1705
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
1706
- <span class="token punctuation">}</span></pre>
1707
- </div>
1708
- <div class="ml-3">
1709
- <p class="p">
1710
- <p>Green at weight 500.</p>
1711
-
1712
- </p>
1713
-
1714
-
1715
- <h5 class="f-2 ttu">
1716
-
1717
- Example
1718
-
1719
- </h5>
1720
-
1721
-
1722
- <div class="mv-3 example">
1723
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1724
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1725
- .green-500
1726
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1727
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1728
- <div class="example-demonstration">
1729
-
1730
- <div class="bg-black pa-2">
1731
- <code class="green-500">
1732
- .green-500
1733
- </code>
1734
- </div>
1735
-
1736
- </div>
1737
- </div>
1738
-
1739
-
1740
- </div>
1741
-
1742
- <div class="mt-4 flex gap-3 items-center justify-between" id="green-600">
1743
- <h4 class="f-4 fw-3 ws-nowrap"><code>.green-600</code></h4>
1744
- <pre class="f-3 highlighted-code"><span class="token selector">.green-600</span> <span class="token punctuation">{</span>
1745
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
1746
- <span class="token punctuation">}</span></pre>
1747
- </div>
1748
- <div class="ml-3">
1749
- <p class="p">
1750
- <p>Green at weight 600 ().</p>
1751
-
1752
- </p>
1753
-
1754
-
1755
- <h5 class="f-2 ttu">
1756
-
1757
- Example
1758
-
1759
- </h5>
1760
-
1761
-
1762
- <div class="mv-3 example">
1763
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1764
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1765
- .green-600
1766
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1767
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1768
- <div class="example-demonstration">
1769
-
1770
- <div class="bg-black pa-2">
1771
- <code class="green-600">
1772
- .green-600
1773
- </code>
1774
- </div>
1775
-
1776
- </div>
1777
- </div>
1778
-
1779
-
1780
- </div>
1781
-
1782
- <div class="mt-4 flex gap-3 items-center justify-between" id="green-700">
1783
- <h4 class="f-4 fw-3 ws-nowrap"><code>.green-700</code></h4>
1784
- <pre class="f-3 highlighted-code"><span class="token selector">.green-700</span> <span class="token punctuation">{</span>
1785
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
1786
- <span class="token punctuation">}</span></pre>
1787
- </div>
1788
- <div class="ml-3">
1789
- <p class="p">
1790
- <p>Green at weight 700 ().</p>
1791
-
1792
- </p>
1793
-
1794
-
1795
- <h5 class="f-2 ttu">
1796
-
1797
- Example
1798
-
1799
- </h5>
1800
-
1801
-
1802
- <div class="mv-3 example">
1803
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1804
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-700<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1805
- .green-700
1806
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1807
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1808
- <div class="example-demonstration">
1809
-
1810
- <div class="bg-black pa-2">
1811
- <code class="green-700">
1812
- .green-700
1813
- </code>
1814
- </div>
1815
-
1816
- </div>
1817
- </div>
1818
-
1819
-
1820
- </div>
1821
-
1822
- <div class="mt-4 flex gap-3 items-center justify-between" id="green-800">
1823
- <h4 class="f-4 fw-3 ws-nowrap"><code>.green-800</code></h4>
1824
- <pre class="f-3 highlighted-code"><span class="token selector">.green-800</span> <span class="token punctuation">{</span>
1825
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
1826
- <span class="token punctuation">}</span></pre>
1827
- </div>
1828
- <div class="ml-3">
1829
- <p class="p">
1830
- <p>Green at weight 800 (second lightest).</p>
1831
-
1832
- </p>
1833
-
1834
-
1835
- <h5 class="f-2 ttu">
1836
-
1837
- Example
1838
-
1839
- </h5>
1840
-
1841
-
1842
- <div class="mv-3 example">
1843
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1844
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1845
- .green-800
1846
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1847
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1848
- <div class="example-demonstration">
1849
-
1850
- <div class="bg-black pa-2">
1851
- <code class="green-800">
1852
- .green-800
1853
- </code>
1854
- </div>
1855
-
1856
- </div>
1857
- </div>
1858
-
1859
-
1860
- </div>
1861
-
1862
- <div class="mt-4 flex gap-3 items-center justify-between" id="green-900">
1863
- <h4 class="f-4 fw-3 ws-nowrap"><code>.green-900</code></h4>
1864
- <pre class="f-3 highlighted-code"><span class="token selector">.green-900</span> <span class="token punctuation">{</span>
1865
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
1866
- <span class="token punctuation">}</span></pre>
1867
- </div>
1868
- <div class="ml-3">
1869
- <p class="p">
1870
- <p>Green at weight 900 (lightest).</p>
1871
-
1872
- </p>
1873
-
1874
-
1875
- <h5 class="f-2 ttu">
1876
-
1877
- Example
1878
-
1879
- </h5>
1880
-
1881
-
1882
- <div class="mv-3 example">
1883
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1884
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-900<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1885
- .green-900
1886
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1887
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1888
- <div class="example-demonstration">
1889
-
1890
- <div class="bg-black pa-2">
1891
- <code class="green-900">
1892
- .green-900
1893
- </code>
1894
- </div>
1895
-
1896
- </div>
1897
- </div>
1898
-
1899
-
1900
- </div>
1901
-
1902
-
1903
- <h3 class="f-5 mt-4" id="class-scale:foreground-blue">Blue</h3>
1904
- <p class="p">
1905
- <p>Blue shades.</p>
1906
-
1907
- </p>
1908
-
1909
- <h4 class="f-2 b">See Also</h3>
1910
- <ul class="see-also">
1911
-
1912
- <li><p><a href="/brut-css/properties/colors.html#property-scale:blue">Blue</a></p>
1913
- </li>
1914
-
1915
- </ul>
1916
-
1917
-
1918
- <div class="mt-4 flex gap-3 items-center justify-between" id="blue-100">
1919
- <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-100</code></h4>
1920
- <pre class="f-3 highlighted-code"><span class="token selector">.blue-100</span> <span class="token punctuation">{</span>
1921
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
1922
- <span class="token punctuation">}</span></pre>
1923
- </div>
1924
- <div class="ml-3">
1925
- <p class="p">
1926
- <p>Blue at weight 100 (darkest).</p>
1927
-
1928
- </p>
1929
-
1930
-
1931
- <h5 class="f-2 ttu">
1932
-
1933
- Example
1934
-
1935
- </h5>
1936
-
1937
-
1938
- <div class="mv-3 example">
1939
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1940
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1941
- .blue-100
1942
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1943
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1944
- <div class="example-demonstration">
1945
-
1946
- <div class="bg-white pa-2">
1947
- <code class="blue-100">
1948
- .blue-100
1949
- </code>
1950
- </div>
1951
-
1952
- </div>
1953
- </div>
1954
-
1955
-
1956
- </div>
1957
-
1958
- <div class="mt-4 flex gap-3 items-center justify-between" id="blue-200">
1959
- <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-200</code></h4>
1960
- <pre class="f-3 highlighted-code"><span class="token selector">.blue-200</span> <span class="token punctuation">{</span>
1961
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
1962
- <span class="token punctuation">}</span></pre>
1963
- </div>
1964
- <div class="ml-3">
1965
- <p class="p">
1966
- <p>Blue at weight 200 (second darkest).</p>
1967
-
1968
- </p>
1969
-
1970
-
1971
- <h5 class="f-2 ttu">
1972
-
1973
- Example
1974
-
1975
- </h5>
1976
-
1977
-
1978
- <div class="mv-3 example">
1979
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1980
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1981
- .blue-200
1982
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1983
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1984
- <div class="example-demonstration">
1985
-
1986
- <div class="bg-white pa-2">
1987
- <code class="blue-200">
1988
- .blue-200
1989
- </code>
1990
- </div>
1991
-
1992
- </div>
1993
- </div>
1994
-
1995
-
1996
- </div>
1997
-
1998
- <div class="mt-4 flex gap-3 items-center justify-between" id="blue-300">
1999
- <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-300</code></h4>
2000
- <pre class="f-3 highlighted-code"><span class="token selector">.blue-300</span> <span class="token punctuation">{</span>
2001
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
2002
- <span class="token punctuation">}</span></pre>
2003
- </div>
2004
- <div class="ml-3">
2005
- <p class="p">
2006
- <p>Blue at weight 300.</p>
2007
-
2008
- </p>
2009
-
2010
-
2011
- <h5 class="f-2 ttu">
2012
-
2013
- Example
2014
-
2015
- </h5>
2016
-
2017
-
2018
- <div class="mv-3 example">
2019
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2020
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2021
- .blue-300
2022
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2023
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2024
- <div class="example-demonstration">
2025
-
2026
- <div class="bg-white pa-2">
2027
- <code class="blue-300">
2028
- .blue-300
2029
- </code>
2030
- </div>
2031
-
2032
- </div>
2033
- </div>
2034
-
2035
-
2036
- </div>
2037
-
2038
- <div class="mt-4 flex gap-3 items-center justify-between" id="blue-400">
2039
- <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-400</code></h4>
2040
- <pre class="f-3 highlighted-code"><span class="token selector">.blue-400</span> <span class="token punctuation">{</span>
2041
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
2042
- <span class="token punctuation">}</span></pre>
2043
- </div>
2044
- <div class="ml-3">
2045
- <p class="p">
2046
- <p>Blue at weight 400.</p>
2047
-
2048
- </p>
2049
-
2050
-
2051
- <h5 class="f-2 ttu">
2052
-
2053
- Example
2054
-
2055
- </h5>
2056
-
2057
-
2058
- <div class="mv-3 example">
2059
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2060
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2061
- .blue-400
2062
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2063
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2064
- <div class="example-demonstration">
2065
-
2066
- <div class="bg-white pa-2">
2067
- <code class="blue-400">
2068
- .blue-400
2069
- </code>
2070
- </div>
2071
-
2072
- </div>
2073
- </div>
2074
-
2075
-
2076
- </div>
2077
-
2078
- <div class="mt-4 flex gap-3 items-center justify-between" id="blue-500">
2079
- <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-500</code></h4>
2080
- <pre class="f-3 highlighted-code"><span class="token selector">.blue-500</span> <span class="token punctuation">{</span>
2081
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
2082
- <span class="token punctuation">}</span></pre>
2083
- </div>
2084
- <div class="ml-3">
2085
- <p class="p">
2086
- <p>Blue at weight 500.</p>
2087
-
2088
- </p>
2089
-
2090
-
2091
- <h5 class="f-2 ttu">
2092
-
2093
- Example
2094
-
2095
- </h5>
2096
-
2097
-
2098
- <div class="mv-3 example">
2099
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2100
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2101
- .blue-500
2102
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2103
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2104
- <div class="example-demonstration">
2105
-
2106
- <div class="bg-black pa-2">
2107
- <code class="blue-500">
2108
- .blue-500
2109
- </code>
2110
- </div>
2111
-
2112
- </div>
2113
- </div>
2114
-
2115
-
2116
- </div>
2117
-
2118
- <div class="mt-4 flex gap-3 items-center justify-between" id="blue-600">
2119
- <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-600</code></h4>
2120
- <pre class="f-3 highlighted-code"><span class="token selector">.blue-600</span> <span class="token punctuation">{</span>
2121
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
2122
- <span class="token punctuation">}</span></pre>
2123
- </div>
2124
- <div class="ml-3">
2125
- <p class="p">
2126
- <p>Blue at weight 600 ().</p>
2127
-
2128
- </p>
2129
-
2130
-
2131
- <h5 class="f-2 ttu">
2132
-
2133
- Example
2134
-
2135
- </h5>
2136
-
2137
-
2138
- <div class="mv-3 example">
2139
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2140
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2141
- .blue-600
2142
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2143
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2144
- <div class="example-demonstration">
2145
-
2146
- <div class="bg-black pa-2">
2147
- <code class="blue-600">
2148
- .blue-600
2149
- </code>
2150
- </div>
2151
-
2152
- </div>
2153
- </div>
2154
-
2155
-
2156
- </div>
2157
-
2158
- <div class="mt-4 flex gap-3 items-center justify-between" id="blue-700">
2159
- <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-700</code></h4>
2160
- <pre class="f-3 highlighted-code"><span class="token selector">.blue-700</span> <span class="token punctuation">{</span>
2161
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
2162
- <span class="token punctuation">}</span></pre>
2163
- </div>
2164
- <div class="ml-3">
2165
- <p class="p">
2166
- <p>Blue at weight 700 ().</p>
2167
-
2168
- </p>
2169
-
2170
-
2171
- <h5 class="f-2 ttu">
2172
-
2173
- Example
2174
-
2175
- </h5>
2176
-
2177
-
2178
- <div class="mv-3 example">
2179
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2180
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-700<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2181
- .blue-700
2182
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2183
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2184
- <div class="example-demonstration">
2185
-
2186
- <div class="bg-black pa-2">
2187
- <code class="blue-700">
2188
- .blue-700
2189
- </code>
2190
- </div>
2191
-
2192
- </div>
2193
- </div>
2194
-
2195
-
2196
- </div>
2197
-
2198
- <div class="mt-4 flex gap-3 items-center justify-between" id="blue-800">
2199
- <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-800</code></h4>
2200
- <pre class="f-3 highlighted-code"><span class="token selector">.blue-800</span> <span class="token punctuation">{</span>
2201
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
2202
- <span class="token punctuation">}</span></pre>
2203
- </div>
2204
- <div class="ml-3">
2205
- <p class="p">
2206
- <p>Blue at weight 800 (second lightest).</p>
2207
-
2208
- </p>
2209
-
2210
-
2211
- <h5 class="f-2 ttu">
2212
-
2213
- Example
2214
-
2215
- </h5>
2216
-
2217
-
2218
- <div class="mv-3 example">
2219
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2220
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2221
- .blue-800
2222
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2223
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2224
- <div class="example-demonstration">
2225
-
2226
- <div class="bg-black pa-2">
2227
- <code class="blue-800">
2228
- .blue-800
2229
- </code>
2230
- </div>
2231
-
2232
- </div>
2233
- </div>
2234
-
2235
-
2236
- </div>
2237
-
2238
- <div class="mt-4 flex gap-3 items-center justify-between" id="blue-900">
2239
- <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-900</code></h4>
2240
- <pre class="f-3 highlighted-code"><span class="token selector">.blue-900</span> <span class="token punctuation">{</span>
2241
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
2242
- <span class="token punctuation">}</span></pre>
2243
- </div>
2244
- <div class="ml-3">
2245
- <p class="p">
2246
- <p>Blue at weight 900 (lightest).</p>
2247
-
2248
- </p>
2249
-
2250
-
2251
- <h5 class="f-2 ttu">
2252
-
2253
- Example
2254
-
2255
- </h5>
2256
-
2257
-
2258
- <div class="mv-3 example">
2259
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2260
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-900<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2261
- .blue-900
2262
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2263
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2264
- <div class="example-demonstration">
2265
-
2266
- <div class="bg-black pa-2">
2267
- <code class="blue-900">
2268
- .blue-900
2269
- </code>
2270
- </div>
2271
-
2272
- </div>
2273
- </div>
2274
-
2275
-
2276
- </div>
2277
-
2278
-
2279
- <h3 class="f-5 mt-4" id="class-scale:foreground-purple">Purple</h3>
2280
- <p class="p">
2281
- <p>Purple shades.</p>
2282
-
2283
- </p>
2284
-
2285
- <h4 class="f-2 b">See Also</h3>
2286
- <ul class="see-also">
2287
-
2288
- <li><p><a href="/brut-css/properties/colors.html#property-scale:purple">Purple</a></p>
2289
- </li>
2290
-
2291
- </ul>
2292
-
2293
-
2294
- <div class="mt-4 flex gap-3 items-center justify-between" id="purple-100">
2295
- <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-100</code></h4>
2296
- <pre class="f-3 highlighted-code"><span class="token selector">.purple-100</span> <span class="token punctuation">{</span>
2297
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
2298
- <span class="token punctuation">}</span></pre>
2299
- </div>
2300
- <div class="ml-3">
2301
- <p class="p">
2302
- <p>Purple at weight 100 (darkest).</p>
2303
-
2304
- </p>
2305
-
2306
-
2307
- <h5 class="f-2 ttu">
2308
-
2309
- Example
2310
-
2311
- </h5>
2312
-
2313
-
2314
- <div class="mv-3 example">
2315
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2316
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2317
- .purple-100
2318
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2319
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2320
- <div class="example-demonstration">
2321
-
2322
- <div class="bg-white pa-2">
2323
- <code class="purple-100">
2324
- .purple-100
2325
- </code>
2326
- </div>
2327
-
2328
- </div>
2329
- </div>
2330
-
2331
-
2332
- </div>
2333
-
2334
- <div class="mt-4 flex gap-3 items-center justify-between" id="purple-200">
2335
- <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-200</code></h4>
2336
- <pre class="f-3 highlighted-code"><span class="token selector">.purple-200</span> <span class="token punctuation">{</span>
2337
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
2338
- <span class="token punctuation">}</span></pre>
2339
- </div>
2340
- <div class="ml-3">
2341
- <p class="p">
2342
- <p>Purple at weight 200 (second darkest).</p>
2343
-
2344
- </p>
2345
-
2346
-
2347
- <h5 class="f-2 ttu">
2348
-
2349
- Example
2350
-
2351
- </h5>
2352
-
2353
-
2354
- <div class="mv-3 example">
2355
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2356
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2357
- .purple-200
2358
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2359
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2360
- <div class="example-demonstration">
2361
-
2362
- <div class="bg-white pa-2">
2363
- <code class="purple-200">
2364
- .purple-200
2365
- </code>
2366
- </div>
2367
-
2368
- </div>
2369
- </div>
2370
-
2371
-
2372
- </div>
2373
-
2374
- <div class="mt-4 flex gap-3 items-center justify-between" id="purple-300">
2375
- <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-300</code></h4>
2376
- <pre class="f-3 highlighted-code"><span class="token selector">.purple-300</span> <span class="token punctuation">{</span>
2377
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
2378
- <span class="token punctuation">}</span></pre>
2379
- </div>
2380
- <div class="ml-3">
2381
- <p class="p">
2382
- <p>Purple at weight 300.</p>
2383
-
2384
- </p>
2385
-
2386
-
2387
- <h5 class="f-2 ttu">
2388
-
2389
- Example
2390
-
2391
- </h5>
2392
-
2393
-
2394
- <div class="mv-3 example">
2395
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2396
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2397
- .purple-300
2398
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2399
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2400
- <div class="example-demonstration">
2401
-
2402
- <div class="bg-white pa-2">
2403
- <code class="purple-300">
2404
- .purple-300
2405
- </code>
2406
- </div>
2407
-
2408
- </div>
2409
- </div>
2410
-
2411
-
2412
- </div>
2413
-
2414
- <div class="mt-4 flex gap-3 items-center justify-between" id="purple-400">
2415
- <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-400</code></h4>
2416
- <pre class="f-3 highlighted-code"><span class="token selector">.purple-400</span> <span class="token punctuation">{</span>
2417
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
2418
- <span class="token punctuation">}</span></pre>
2419
- </div>
2420
- <div class="ml-3">
2421
- <p class="p">
2422
- <p>Purple at weight 400.</p>
2423
-
2424
- </p>
2425
-
2426
-
2427
- <h5 class="f-2 ttu">
2428
-
2429
- Example
2430
-
2431
- </h5>
2432
-
2433
-
2434
- <div class="mv-3 example">
2435
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2436
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2437
- .purple-400
2438
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2439
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2440
- <div class="example-demonstration">
2441
-
2442
- <div class="bg-white pa-2">
2443
- <code class="purple-400">
2444
- .purple-400
2445
- </code>
2446
- </div>
2447
-
2448
- </div>
2449
- </div>
2450
-
2451
-
2452
- </div>
2453
-
2454
- <div class="mt-4 flex gap-3 items-center justify-between" id="purple-500">
2455
- <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-500</code></h4>
2456
- <pre class="f-3 highlighted-code"><span class="token selector">.purple-500</span> <span class="token punctuation">{</span>
2457
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
2458
- <span class="token punctuation">}</span></pre>
2459
- </div>
2460
- <div class="ml-3">
2461
- <p class="p">
2462
- <p>Purple at weight 500.</p>
2463
-
2464
- </p>
2465
-
2466
-
2467
- <h5 class="f-2 ttu">
2468
-
2469
- Example
2470
-
2471
- </h5>
2472
-
2473
-
2474
- <div class="mv-3 example">
2475
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2476
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2477
- .purple-500
2478
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2479
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2480
- <div class="example-demonstration">
2481
-
2482
- <div class="bg-black pa-2">
2483
- <code class="purple-500">
2484
- .purple-500
2485
- </code>
2486
- </div>
2487
-
2488
- </div>
2489
- </div>
2490
-
2491
-
2492
- </div>
2493
-
2494
- <div class="mt-4 flex gap-3 items-center justify-between" id="purple-600">
2495
- <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-600</code></h4>
2496
- <pre class="f-3 highlighted-code"><span class="token selector">.purple-600</span> <span class="token punctuation">{</span>
2497
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
2498
- <span class="token punctuation">}</span></pre>
2499
- </div>
2500
- <div class="ml-3">
2501
- <p class="p">
2502
- <p>Purple at weight 600 ().</p>
2503
-
2504
- </p>
2505
-
2506
-
2507
- <h5 class="f-2 ttu">
2508
-
2509
- Example
2510
-
2511
- </h5>
2512
-
2513
-
2514
- <div class="mv-3 example">
2515
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2516
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2517
- .purple-600
2518
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2519
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2520
- <div class="example-demonstration">
2521
-
2522
- <div class="bg-black pa-2">
2523
- <code class="purple-600">
2524
- .purple-600
2525
- </code>
2526
- </div>
2527
-
2528
- </div>
2529
- </div>
2530
-
2531
-
2532
- </div>
2533
-
2534
- <div class="mt-4 flex gap-3 items-center justify-between" id="purple-700">
2535
- <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-700</code></h4>
2536
- <pre class="f-3 highlighted-code"><span class="token selector">.purple-700</span> <span class="token punctuation">{</span>
2537
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
2538
- <span class="token punctuation">}</span></pre>
2539
- </div>
2540
- <div class="ml-3">
2541
- <p class="p">
2542
- <p>Purple at weight 700 ().</p>
2543
-
2544
- </p>
2545
-
2546
-
2547
- <h5 class="f-2 ttu">
2548
-
2549
- Example
2550
-
2551
- </h5>
2552
-
2553
-
2554
- <div class="mv-3 example">
2555
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2556
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-700<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2557
- .purple-700
2558
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2559
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2560
- <div class="example-demonstration">
2561
-
2562
- <div class="bg-black pa-2">
2563
- <code class="purple-700">
2564
- .purple-700
2565
- </code>
2566
- </div>
2567
-
2568
- </div>
2569
- </div>
2570
-
2571
-
2572
- </div>
2573
-
2574
- <div class="mt-4 flex gap-3 items-center justify-between" id="purple-800">
2575
- <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-800</code></h4>
2576
- <pre class="f-3 highlighted-code"><span class="token selector">.purple-800</span> <span class="token punctuation">{</span>
2577
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
2578
- <span class="token punctuation">}</span></pre>
2579
- </div>
2580
- <div class="ml-3">
2581
- <p class="p">
2582
- <p>Purple at weight 800 (second lightest).</p>
2583
-
2584
- </p>
2585
-
2586
-
2587
- <h5 class="f-2 ttu">
2588
-
2589
- Example
2590
-
2591
- </h5>
2592
-
2593
-
2594
- <div class="mv-3 example">
2595
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2596
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2597
- .purple-800
2598
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2599
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2600
- <div class="example-demonstration">
2601
-
2602
- <div class="bg-black pa-2">
2603
- <code class="purple-800">
2604
- .purple-800
2605
- </code>
2606
- </div>
2607
-
2608
- </div>
2609
- </div>
2610
-
2611
-
2612
- </div>
2613
-
2614
- <div class="mt-4 flex gap-3 items-center justify-between" id="purple-900">
2615
- <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-900</code></h4>
2616
- <pre class="f-3 highlighted-code"><span class="token selector">.purple-900</span> <span class="token punctuation">{</span>
2617
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
2618
- <span class="token punctuation">}</span></pre>
2619
- </div>
2620
- <div class="ml-3">
2621
- <p class="p">
2622
- <p>Purple at weight 900 (lightest).</p>
2623
-
2624
- </p>
2625
-
2626
-
2627
- <h5 class="f-2 ttu">
2628
-
2629
- Example
2630
-
2631
- </h5>
2632
-
2633
-
2634
- <div class="mv-3 example">
2635
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2636
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-900<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2637
- .purple-900
2638
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2639
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2640
- <div class="example-demonstration">
2641
-
2642
- <div class="bg-black pa-2">
2643
- <code class="purple-900">
2644
- .purple-900
2645
- </code>
2646
- </div>
2647
-
2648
- </div>
2649
- </div>
2650
-
2651
-
2652
- </div>
2653
-
2654
-
2655
- <h3 class="f-5 mt-4" id="class-scale:foreground-gray">Gray</h3>
2656
- <p class="p">
2657
- <p>Gray shades.</p>
2658
-
2659
- </p>
2660
-
2661
- <h4 class="f-2 b">See Also</h3>
2662
- <ul class="see-also">
2663
-
2664
- <li><p><a href="/brut-css/properties/colors.html#property-scale:gray">Gray</a></p>
2665
- </li>
2666
-
2667
- </ul>
2668
-
2669
-
2670
- <div class="mt-4 flex gap-3 items-center justify-between" id="gray-100">
2671
- <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-100</code></h4>
2672
- <pre class="f-3 highlighted-code"><span class="token selector">.gray-100</span> <span class="token punctuation">{</span>
2673
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
2674
- <span class="token punctuation">}</span></pre>
2675
- </div>
2676
- <div class="ml-3">
2677
- <p class="p">
2678
- <p>Gray at weight 100 (darkest).</p>
2679
-
2680
- </p>
2681
-
2682
-
2683
- <h5 class="f-2 ttu">
2684
-
2685
- Example
2686
-
2687
- </h5>
2688
-
2689
-
2690
- <div class="mv-3 example">
2691
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2692
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2693
- .gray-100
2694
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2695
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2696
- <div class="example-demonstration">
2697
-
2698
- <div class="bg-white pa-2">
2699
- <code class="gray-100">
2700
- .gray-100
2701
- </code>
2702
- </div>
2703
-
2704
- </div>
2705
- </div>
2706
-
2707
-
2708
- </div>
2709
-
2710
- <div class="mt-4 flex gap-3 items-center justify-between" id="gray-200">
2711
- <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-200</code></h4>
2712
- <pre class="f-3 highlighted-code"><span class="token selector">.gray-200</span> <span class="token punctuation">{</span>
2713
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
2714
- <span class="token punctuation">}</span></pre>
2715
- </div>
2716
- <div class="ml-3">
2717
- <p class="p">
2718
- <p>Gray at weight 200 (second darkest).</p>
2719
-
2720
- </p>
2721
-
2722
-
2723
- <h5 class="f-2 ttu">
2724
-
2725
- Example
2726
-
2727
- </h5>
2728
-
2729
-
2730
- <div class="mv-3 example">
2731
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2732
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2733
- .gray-200
2734
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2735
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2736
- <div class="example-demonstration">
2737
-
2738
- <div class="bg-white pa-2">
2739
- <code class="gray-200">
2740
- .gray-200
2741
- </code>
2742
- </div>
2743
-
2744
- </div>
2745
- </div>
2746
-
2747
-
2748
- </div>
2749
-
2750
- <div class="mt-4 flex gap-3 items-center justify-between" id="gray-300">
2751
- <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-300</code></h4>
2752
- <pre class="f-3 highlighted-code"><span class="token selector">.gray-300</span> <span class="token punctuation">{</span>
2753
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
2754
- <span class="token punctuation">}</span></pre>
2755
- </div>
2756
- <div class="ml-3">
2757
- <p class="p">
2758
- <p>Gray at weight 300.</p>
2759
-
2760
- </p>
2761
-
2762
-
2763
- <h5 class="f-2 ttu">
2764
-
2765
- Example
2766
-
2767
- </h5>
2768
-
2769
-
2770
- <div class="mv-3 example">
2771
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2772
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2773
- .gray-300
2774
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2775
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2776
- <div class="example-demonstration">
2777
-
2778
- <div class="bg-white pa-2">
2779
- <code class="gray-300">
2780
- .gray-300
2781
- </code>
2782
- </div>
2783
-
2784
- </div>
2785
- </div>
2786
-
2787
-
2788
- </div>
2789
-
2790
- <div class="mt-4 flex gap-3 items-center justify-between" id="gray-400">
2791
- <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-400</code></h4>
2792
- <pre class="f-3 highlighted-code"><span class="token selector">.gray-400</span> <span class="token punctuation">{</span>
2793
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
2794
- <span class="token punctuation">}</span></pre>
2795
- </div>
2796
- <div class="ml-3">
2797
- <p class="p">
2798
- <p>Gray at weight 400.</p>
2799
-
2800
- </p>
2801
-
2802
-
2803
- <h5 class="f-2 ttu">
2804
-
2805
- Example
2806
-
2807
- </h5>
2808
-
2809
-
2810
- <div class="mv-3 example">
2811
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2812
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2813
- .gray-400
2814
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2815
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2816
- <div class="example-demonstration">
2817
-
2818
- <div class="bg-white pa-2">
2819
- <code class="gray-400">
2820
- .gray-400
2821
- </code>
2822
- </div>
2823
-
2824
- </div>
2825
- </div>
2826
-
2827
-
2828
- </div>
2829
-
2830
- <div class="mt-4 flex gap-3 items-center justify-between" id="gray-500">
2831
- <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-500</code></h4>
2832
- <pre class="f-3 highlighted-code"><span class="token selector">.gray-500</span> <span class="token punctuation">{</span>
2833
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
2834
- <span class="token punctuation">}</span></pre>
2835
- </div>
2836
- <div class="ml-3">
2837
- <p class="p">
2838
- <p>Gray at weight 500.</p>
2839
-
2840
- </p>
2841
-
2842
-
2843
- <h5 class="f-2 ttu">
2844
-
2845
- Example
2846
-
2847
- </h5>
2848
-
2849
-
2850
- <div class="mv-3 example">
2851
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2852
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2853
- .gray-500
2854
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2855
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2856
- <div class="example-demonstration">
2857
-
2858
- <div class="bg-black pa-2">
2859
- <code class="gray-500">
2860
- .gray-500
2861
- </code>
2862
- </div>
2863
-
2864
- </div>
2865
- </div>
2866
-
2867
-
2868
- </div>
2869
-
2870
- <div class="mt-4 flex gap-3 items-center justify-between" id="gray-600">
2871
- <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-600</code></h4>
2872
- <pre class="f-3 highlighted-code"><span class="token selector">.gray-600</span> <span class="token punctuation">{</span>
2873
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
2874
- <span class="token punctuation">}</span></pre>
2875
- </div>
2876
- <div class="ml-3">
2877
- <p class="p">
2878
- <p>Gray at weight 600 ().</p>
2879
-
2880
- </p>
2881
-
2882
-
2883
- <h5 class="f-2 ttu">
2884
-
2885
- Example
2886
-
2887
- </h5>
2888
-
2889
-
2890
- <div class="mv-3 example">
2891
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2892
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2893
- .gray-600
2894
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2895
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2896
- <div class="example-demonstration">
2897
-
2898
- <div class="bg-black pa-2">
2899
- <code class="gray-600">
2900
- .gray-600
2901
- </code>
2902
- </div>
2903
-
2904
- </div>
2905
- </div>
2906
-
2907
-
2908
- </div>
2909
-
2910
- <div class="mt-4 flex gap-3 items-center justify-between" id="gray-700">
2911
- <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-700</code></h4>
2912
- <pre class="f-3 highlighted-code"><span class="token selector">.gray-700</span> <span class="token punctuation">{</span>
2913
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
2914
- <span class="token punctuation">}</span></pre>
2915
- </div>
2916
- <div class="ml-3">
2917
- <p class="p">
2918
- <p>Gray at weight 700 ().</p>
2919
-
2920
- </p>
2921
-
2922
-
2923
- <h5 class="f-2 ttu">
2924
-
2925
- Example
2926
-
2927
- </h5>
2928
-
2929
-
2930
- <div class="mv-3 example">
2931
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2932
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-700<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2933
- .gray-700
2934
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2935
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2936
- <div class="example-demonstration">
2937
-
2938
- <div class="bg-black pa-2">
2939
- <code class="gray-700">
2940
- .gray-700
2941
- </code>
2942
- </div>
2943
-
2944
- </div>
2945
- </div>
2946
-
2947
-
2948
- </div>
2949
-
2950
- <div class="mt-4 flex gap-3 items-center justify-between" id="gray-800">
2951
- <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-800</code></h4>
2952
- <pre class="f-3 highlighted-code"><span class="token selector">.gray-800</span> <span class="token punctuation">{</span>
2953
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
2954
- <span class="token punctuation">}</span></pre>
2955
- </div>
2956
- <div class="ml-3">
2957
- <p class="p">
2958
- <p>Gray at weight 800 (second lightest).</p>
2959
-
2960
- </p>
2961
-
2962
-
2963
- <h5 class="f-2 ttu">
2964
-
2965
- Example
2966
-
2967
- </h5>
2968
-
2969
-
2970
- <div class="mv-3 example">
2971
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2972
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2973
- .gray-800
2974
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2975
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2976
- <div class="example-demonstration">
2977
-
2978
- <div class="bg-black pa-2">
2979
- <code class="gray-800">
2980
- .gray-800
2981
- </code>
2982
- </div>
2983
-
2984
- </div>
2985
- </div>
2986
-
2987
-
2988
- </div>
2989
-
2990
- <div class="mt-4 flex gap-3 items-center justify-between" id="gray-900">
2991
- <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-900</code></h4>
2992
- <pre class="f-3 highlighted-code"><span class="token selector">.gray-900</span> <span class="token punctuation">{</span>
2993
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
2994
- <span class="token punctuation">}</span></pre>
2995
- </div>
2996
- <div class="ml-3">
2997
- <p class="p">
2998
- <p>Gray at weight 900 (lightest).</p>
2999
-
3000
- </p>
3001
-
3002
-
3003
- <h5 class="f-2 ttu">
3004
-
3005
- Example
3006
-
3007
- </h5>
3008
-
3009
-
3010
- <div class="mv-3 example">
3011
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3012
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-900<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3013
- .gray-900
3014
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
3015
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
3016
- <div class="example-demonstration">
3017
-
3018
- <div class="bg-black pa-2">
3019
- <code class="gray-900">
3020
- .gray-900
3021
- </code>
3022
- </div>
3023
-
3024
- </div>
3025
- </div>
3026
-
3027
-
3028
- </div>
3029
-
3030
-
3031
- <h3 class="f-5 mt-4" id="class-scale:foreground-black">Black</h3>
3032
- <p class="p">
3033
- <p>Blacks.</p>
3034
-
3035
- </p>
3036
-
3037
- <h4 class="f-2 b">See Also</h3>
3038
- <ul class="see-also">
3039
-
3040
- <li><p><a href="/brut-css/properties/colors.html#property-scale:black">Black</a></p>
3041
- </li>
3042
-
3043
- </ul>
3044
-
3045
-
3046
- <div class="mt-4 flex gap-3 items-center justify-between" id="black">
3047
- <h4 class="f-4 fw-3 ws-nowrap"><code>.black</code></h4>
3048
- <pre class="f-3 highlighted-code"><span class="token selector">.black</span> <span class="token punctuation">{</span>
3049
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--black<span class="token punctuation">)</span><span class="token punctuation">;</span>
3050
- <span class="token punctuation">}</span></pre>
3051
- </div>
3052
- <div class="ml-3">
3053
- <p class="p">
3054
- <p>Black (pure).</p>
3055
-
3056
- </p>
3057
-
3058
-
3059
- <h5 class="f-2 ttu">
3060
-
3061
- Example
3062
-
3063
- </h5>
3064
-
3065
-
3066
- <div class="mv-3 example">
3067
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3068
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3069
- .black
3070
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
3071
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
3072
- <div class="example-demonstration">
3073
-
3074
- <div class="bg-white pa-2">
3075
- <code class="black">
3076
- .black
3077
- </code>
3078
- </div>
3079
-
3080
- </div>
3081
- </div>
3082
-
3083
-
3084
- </div>
3085
-
3086
- <div class="mt-4 flex gap-3 items-center justify-between" id="black-ish">
3087
- <h4 class="f-4 fw-3 ws-nowrap"><code>.black-ish</code></h4>
3088
- <pre class="f-3 highlighted-code"><span class="token selector">.black-ish</span> <span class="token punctuation">{</span>
3089
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--black-ish<span class="token punctuation">)</span><span class="token punctuation">;</span>
3090
- <span class="token punctuation">}</span></pre>
3091
- </div>
3092
- <div class="ml-3">
3093
- <p class="p">
3094
- <p>Black (slightly off).</p>
3095
-
3096
- </p>
3097
-
3098
-
3099
- <h5 class="f-2 ttu">
3100
-
3101
- Example
3102
-
3103
- </h5>
3104
-
3105
-
3106
- <div class="mv-3 example">
3107
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3108
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black-ish<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3109
- .black-ish
3110
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
3111
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
3112
- <div class="example-demonstration">
3113
-
3114
- <div class="bg-white pa-2">
3115
- <code class="black-ish">
3116
- .black-ish
3117
- </code>
3118
- </div>
3119
-
3120
- </div>
3121
- </div>
3122
-
3123
-
3124
- </div>
3125
-
3126
-
3127
- <h3 class="f-5 mt-4" id="class-scale:foreground-white">White</h3>
3128
- <p class="p">
3129
- <p>Whites.</p>
3130
-
3131
- </p>
3132
-
3133
- <h4 class="f-2 b">See Also</h3>
3134
- <ul class="see-also">
3135
-
3136
- <li><p><a href="/brut-css/properties/colors.html#property-scale:white">White</a></p>
3137
- </li>
3138
-
3139
- </ul>
3140
-
3141
-
3142
- <div class="mt-4 flex gap-3 items-center justify-between" id="white">
3143
- <h4 class="f-4 fw-3 ws-nowrap"><code>.white</code></h4>
3144
- <pre class="f-3 highlighted-code"><span class="token selector">.white</span> <span class="token punctuation">{</span>
3145
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--white<span class="token punctuation">)</span><span class="token punctuation">;</span>
3146
- <span class="token punctuation">}</span></pre>
3147
- </div>
3148
- <div class="ml-3">
3149
- <p class="p">
3150
- <p>White (pure).</p>
3151
-
3152
- </p>
3153
-
3154
-
3155
- <h5 class="f-2 ttu">
3156
-
3157
- Example
3158
-
3159
- </h5>
3160
-
3161
-
3162
- <div class="mv-3 example">
3163
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3164
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3165
- .white
3166
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
3167
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
3168
- <div class="example-demonstration">
3169
-
3170
- <div class="bg-black pa-2">
3171
- <code class="white">
3172
- .white
3173
- </code>
3174
- </div>
3175
-
3176
- </div>
3177
- </div>
3178
-
3179
-
3180
- </div>
3181
-
3182
- <div class="mt-4 flex gap-3 items-center justify-between" id="white-ish">
3183
- <h4 class="f-4 fw-3 ws-nowrap"><code>.white-ish</code></h4>
3184
- <pre class="f-3 highlighted-code"><span class="token selector">.white-ish</span> <span class="token punctuation">{</span>
3185
- <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--white-ish<span class="token punctuation">)</span><span class="token punctuation">;</span>
3186
- <span class="token punctuation">}</span></pre>
3187
- </div>
3188
- <div class="ml-3">
3189
- <p class="p">
3190
- <p>White (slightly off).</p>
3191
-
3192
- </p>
3193
-
3194
-
3195
- <h5 class="f-2 ttu">
3196
-
3197
- Example
3198
-
3199
- </h5>
3200
-
3201
-
3202
- <div class="mv-3 example">
3203
- <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3204
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white-ish<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3205
- .white-ish
3206
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
3207
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
3208
- <div class="example-demonstration">
3209
-
3210
- <div class="bg-black pa-2">
3211
- <code class="white-ish">
3212
- .white-ish
3213
- </code>
3214
- </div>
3215
-
3216
- </div>
3217
- </div>
3218
-
3219
-
3220
- </div>
3221
-
3222
-
3223
- </article>
3224
- <div class="z-5 ma-0 overflow-y-auto pa-2 w-20 h-100 pos-absolute top-0 right-2">
3225
- <div class="pa-3 ba bc-gray-700 bg-gray-900 br-3 shadow-1 ridiculous-liquid-glass-is-all-the-rage">
3226
- <h3>On this Page</h3>
3227
- <ul class="lst-none ma-0 pa-0">
3228
-
3229
- <li class="lh-copy"><a href="#class-scale:foreground-red">Red</a></li>
3230
-
3231
- <li class="lh-copy"><a href="#class-scale:foreground-orange">Orange</a></li>
3232
-
3233
- <li class="lh-copy"><a href="#class-scale:foreground-yellow">Yellow</a></li>
3234
-
3235
- <li class="lh-copy"><a href="#class-scale:foreground-green">Green</a></li>
3236
-
3237
- <li class="lh-copy"><a href="#class-scale:foreground-blue">Blue</a></li>
3238
-
3239
- <li class="lh-copy"><a href="#class-scale:foreground-purple">Purple</a></li>
3240
-
3241
- <li class="lh-copy"><a href="#class-scale:foreground-gray">Gray</a></li>
3242
-
3243
- <li class="lh-copy"><a href="#class-scale:foreground-black">Black</a></li>
3244
-
3245
- <li class="lh-copy"><a href="#class-scale:foreground-white">White</a></li>
3246
-
3247
- </ul>
3248
- </div>
3249
- </div>
3250
- </div>
3251
- <footer class="bg-black white mt-auto">
3252
- <p class="tc">
3253
- Copyright &copy; 2025 David Bryant Copeland.
3254
- </p>
3255
- </footer>
3256
- </section>
3257
- </main>
3258
- </body>
3259
-
3260
- </html>
3261
-