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