brut 0.0.20 → 0.0.22

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 (728) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +24 -3
  3. data/.nvim.lua +1 -0
  4. data/Dockerfile.dx +12 -3
  5. data/Gemfile.lock +9 -7
  6. data/README.md +0 -7
  7. data/Rakefile +6 -4
  8. data/bin/dev +20 -0
  9. data/bin/docs +27 -0
  10. data/bin/setup +47 -1
  11. data/brut-css/.nvim.lua +1 -0
  12. data/brut-css/README.md +28 -0
  13. data/brut-css/bin/build +31 -0
  14. data/brut-css/bin/dev +1 -0
  15. data/brut-css/bin/docs +15 -0
  16. data/brut-css/bin/setup +5 -0
  17. data/brut-css/config/media-queries-all.css +15 -0
  18. data/brut-css/config/media-queries-minimal.css +5 -0
  19. data/brut-css/config/postcss.config.cjs +7 -0
  20. data/brut-css/config/pseudo-classes-all.css +9 -0
  21. data/brut-css/dx +1 -0
  22. data/brut-css/package-lock.json +3217 -0
  23. data/brut-css/package.json +36 -0
  24. data/brut-css/src/css/appearance.css +145 -0
  25. data/brut-css/src/css/border.css +522 -0
  26. data/brut-css/src/css/colors.css +3502 -0
  27. data/brut-css/src/css/dimensions.css +548 -0
  28. data/brut-css/src/css/flex.css +179 -0
  29. data/brut-css/src/css/index.css +13 -0
  30. data/brut-css/src/css/layout.css +120 -0
  31. data/brut-css/src/css/list.css +41 -0
  32. data/brut-css/src/css/positioning.css +354 -0
  33. data/brut-css/src/css/properties/colors.css +455 -0
  34. data/brut-css/src/css/properties/index.css +3 -0
  35. data/brut-css/src/css/properties/spacing.css +140 -0
  36. data/brut-css/src/css/properties/typography.css +224 -0
  37. data/brut-css/src/css/reset.css +107 -0
  38. data/brut-css/src/css/spacing.css +585 -0
  39. data/brut-css/src/css/typography.css +519 -0
  40. data/brut-css/src/css/utils.css +104 -0
  41. data/brut-css/src/docs/1_getting-started/1_overview.md +46 -0
  42. data/brut-css/src/docs/1_getting-started/2_installation.md +25 -0
  43. data/brut-css/src/docs/1_getting-started/3_core-concepts.md +75 -0
  44. data/brut-css/src/docs/1_getting-started/4_simple-example.md +132 -0
  45. data/brut-css/src/docs/1_getting-started/page.html.ejs +10 -0
  46. data/brut-css/src/docs/2_properties/page.html.ejs +71 -0
  47. data/brut-css/src/docs/3_classes/color-demo.html.ejs +31 -0
  48. data/brut-css/src/docs/3_classes/page.html.ejs +87 -0
  49. data/brut-css/src/docs/4_customization/1_design-system.md +36 -0
  50. data/brut-css/src/docs/4_customization/2_breakpoints.md +75 -0
  51. data/brut-css/src/docs/4_customization/3_pseudo-classes.md +74 -0
  52. data/brut-css/src/docs/4_customization/4_advanced-configuration.md +40 -0
  53. data/brut-css/src/docs/4_customization/page.html.ejs +10 -0
  54. data/brut-css/src/docs/docs.css +98 -0
  55. data/brut-css/src/docs/includes/body-and-header.html.ejs +30 -0
  56. data/brut-css/src/docs/includes/footer-and-rest.html.ejs +9 -0
  57. data/brut-css/src/docs/includes/head.html.ejs +5 -0
  58. data/brut-css/src/docs/includes/nav.html.ejs +10 -0
  59. data/brut-css/src/docs/index.html.ejs +32 -0
  60. data/brut-css/src/docs/prism-twilight.min.css +1 -0
  61. data/brut-css/src/js/Logger.js +71 -0
  62. data/brut-css/src/js/build.js +111 -0
  63. data/brut-css/src/js/cli/CLIArgError.js +7 -0
  64. data/brut-css/src/js/cli/Debug.js +27 -0
  65. data/brut-css/src/js/cli/DocsDir.js +16 -0
  66. data/brut-css/src/js/cli/DocsTemplateSourceDir.js +16 -0
  67. data/brut-css/src/js/cli/InputFile.js +31 -0
  68. data/brut-css/src/js/cli/MediaQueryConfigFile.js +10 -0
  69. data/brut-css/src/js/cli/OutputFile.js +22 -0
  70. data/brut-css/src/js/cli/ParsedArg.js +17 -0
  71. data/brut-css/src/js/cli/PathToBrutCSSRoot.js +19 -0
  72. data/brut-css/src/js/cli/PseudoClassConfigFile.js +11 -0
  73. data/brut-css/src/js/cli.js +108 -0
  74. data/brut-css/src/js/docGenerator.js +467 -0
  75. data/brut-css/src/js/mediaQueryConfigParser.js +98 -0
  76. data/brut-css/src/js/post-css-plugins/addMediaQueriesPlugin.js +49 -0
  77. data/brut-css/src/js/post-css-plugins/addPseudoClassesPlugin.js +42 -0
  78. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Category.js +9 -0
  79. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/DocState.js +185 -0
  80. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Documentable.js +8 -0
  81. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Group.js +7 -0
  82. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/ParsedComment.js +73 -0
  83. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Property.js +9 -0
  84. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyCategory.js +4 -0
  85. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyGroup.js +8 -0
  86. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Rule.js +12 -0
  87. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleCategory.js +4 -0
  88. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleGroup.js +8 -0
  89. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeRef.js +5 -0
  90. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeURL.js +9 -0
  91. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin.js +49 -0
  92. data/brut-css/src/js/post-css-plugins/generateRootCustomPropertiesPlugin.js +45 -0
  93. data/brut-css/src/js/pseudoClassConfigParser.js +145 -0
  94. data/brut-js/.projections.json +10 -0
  95. data/brut-js/README.md +118 -0
  96. data/brut-js/bin/build +10 -0
  97. data/brut-js/bin/ci +5 -0
  98. data/brut-js/bin/setup +5 -0
  99. data/brut-js/docs/README.md +8 -0
  100. data/brut-js/docs/jsdoc-plugins/customElementTag.js +8 -0
  101. data/brut-js/docs/jsdoc-theme/publish.js +692 -0
  102. data/brut-js/docs/jsdoc-theme/static/scripts/linenumber.js +25 -0
  103. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/Apache-License-2.0.txt +202 -0
  104. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/lang-css.js +2 -0
  105. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/prettify.js +28 -0
  106. data/brut-js/docs/jsdoc-theme/static/styles/jsdoc-default.css +327 -0
  107. data/brut-js/docs/jsdoc-theme/static/styles/prettify-jsdoc.css +111 -0
  108. data/brut-js/docs/jsdoc-theme/static/styles/prettify-tomorrow.css +132 -0
  109. data/brut-js/docs/jsdoc-theme/tmpl/augments.tmpl +10 -0
  110. data/brut-js/docs/jsdoc-theme/tmpl/container.tmpl +199 -0
  111. data/brut-js/docs/jsdoc-theme/tmpl/details.tmpl +143 -0
  112. data/brut-js/docs/jsdoc-theme/tmpl/example.tmpl +2 -0
  113. data/brut-js/docs/jsdoc-theme/tmpl/examples.tmpl +13 -0
  114. data/brut-js/docs/jsdoc-theme/tmpl/exceptions.tmpl +32 -0
  115. data/brut-js/docs/jsdoc-theme/tmpl/layout.tmpl +38 -0
  116. data/brut-js/docs/jsdoc-theme/tmpl/mainpage.tmpl +14 -0
  117. data/brut-js/docs/jsdoc-theme/tmpl/members.tmpl +38 -0
  118. data/brut-js/docs/jsdoc-theme/tmpl/method.tmpl +131 -0
  119. data/brut-js/docs/jsdoc-theme/tmpl/modifies.tmpl +14 -0
  120. data/brut-js/docs/jsdoc-theme/tmpl/params.tmpl +131 -0
  121. data/brut-js/docs/jsdoc-theme/tmpl/properties.tmpl +108 -0
  122. data/brut-js/docs/jsdoc-theme/tmpl/returns.tmpl +19 -0
  123. data/brut-js/docs/jsdoc-theme/tmpl/source.tmpl +8 -0
  124. data/brut-js/docs/jsdoc-theme/tmpl/tutorial.tmpl +19 -0
  125. data/brut-js/docs/jsdoc-theme/tmpl/type.tmpl +7 -0
  126. data/brut-js/docs/jsdoc.config.json +23 -0
  127. data/brut-js/docs/package-lock.json +343 -0
  128. data/brut-js/docs/package.json +7 -0
  129. data/brut-js/package-lock.json +2171 -0
  130. data/brut-js/package.json +32 -0
  131. data/brut-js/specs/AjaxSubmit.spec.js +256 -0
  132. data/brut-js/specs/Autosubmit.spec.js +127 -0
  133. data/brut-js/specs/ConfirmSubmit.spec.js +193 -0
  134. data/brut-js/specs/ConstraintViolationMessage.spec.js +33 -0
  135. data/brut-js/specs/ConstraintViolationMessages.spec.js +29 -0
  136. data/brut-js/specs/CopyToClipboard.spec.js +35 -0
  137. data/brut-js/specs/Form.spec.js +181 -0
  138. data/brut-js/specs/I18nTranslation.spec.js +19 -0
  139. data/brut-js/specs/LocaleDetection.spec.js +22 -0
  140. data/brut-js/specs/Message.spec.js +15 -0
  141. data/brut-js/specs/SpecHelper.js +23 -0
  142. data/brut-js/specs/Tabs.spec.js +41 -0
  143. data/brut-js/specs/config/asset_metadata.json +7 -0
  144. data/brut-js/src/AjaxSubmit.js +384 -0
  145. data/brut-js/src/Autosubmit.js +63 -0
  146. data/brut-js/src/BaseCustomElement.js +261 -0
  147. data/brut-js/src/ConfirmSubmit.js +116 -0
  148. data/brut-js/src/ConfirmationDialog.js +143 -0
  149. data/brut-js/src/ConstraintViolationMessage.js +125 -0
  150. data/brut-js/src/ConstraintViolationMessages.js +98 -0
  151. data/brut-js/src/CopyToClipboard.js +96 -0
  152. data/brut-js/src/Form.js +151 -0
  153. data/brut-js/src/I18nTranslation.js +61 -0
  154. data/brut-js/src/LocaleDetection.js +117 -0
  155. data/brut-js/src/Logger.js +90 -0
  156. data/brut-js/src/Message.js +56 -0
  157. data/brut-js/src/RichString.js +113 -0
  158. data/brut-js/src/Tabs.js +168 -0
  159. data/brut-js/src/Tracing.js +247 -0
  160. data/brut-js/src/appForTestingOnly.js +15 -0
  161. data/brut-js/src/index.js +130 -0
  162. data/brut-js/src/testing/AssetMetadata.js +35 -0
  163. data/brut-js/src/testing/AssetMetadataLoader.js +25 -0
  164. data/brut-js/src/testing/CustomElementTest.js +235 -0
  165. data/brut-js/src/testing/DOMCreator.js +45 -0
  166. data/brut-js/src/testing/index.js +48 -0
  167. data/brutrb.com/.vitepress/config.mjs +106 -0
  168. data/brutrb.com/.vitepress/plugins/jsdocLinker.js +34 -0
  169. data/brutrb.com/.vitepress/plugins/rdocLinker.js +18 -0
  170. data/brutrb.com/.vitepress/theme/custom.css +7 -0
  171. data/brutrb.com/.vitepress/theme/index.js +18 -0
  172. data/brutrb.com/.vitepress/theme/style.css +149 -0
  173. data/brutrb.com/ai.md +68 -0
  174. data/brutrb.com/assets.md +138 -0
  175. data/brutrb.com/bin/build +5 -0
  176. data/brutrb.com/bin/deploy +7 -0
  177. data/brutrb.com/bin/dev +5 -0
  178. data/brutrb.com/bin/setup +5 -0
  179. data/brutrb.com/brut-js.md +117 -0
  180. data/brutrb.com/business-logic.md +55 -0
  181. data/brutrb.com/cli.md +278 -0
  182. data/brutrb.com/components.md +243 -0
  183. data/brutrb.com/configuration.md +257 -0
  184. data/brutrb.com/css.md +103 -0
  185. data/brutrb.com/custom-element-tests.md +149 -0
  186. data/brutrb.com/database-access.md +201 -0
  187. data/brutrb.com/database-schema.md +312 -0
  188. data/brutrb.com/deployment.md +66 -0
  189. data/brutrb.com/dev-environment.md +179 -0
  190. data/brutrb.com/doc-conventions.md +39 -0
  191. data/brutrb.com/end-to-end-tests.md +174 -0
  192. data/brutrb.com/flash-and-session.md +224 -0
  193. data/brutrb.com/forms.md +866 -0
  194. data/brutrb.com/getting-started.md +66 -0
  195. data/brutrb.com/handlers.md +153 -0
  196. data/brutrb.com/hooks.md +178 -0
  197. data/brutrb.com/i18n.md +188 -0
  198. data/brutrb.com/images/Makefile +10 -0
  199. data/brutrb.com/images/dev-env-overview.dot +54 -0
  200. data/brutrb.com/images/dev-env-overview.png +0 -0
  201. data/brutrb.com/images/dev-env-protocol.dot +37 -0
  202. data/brutrb.com/images/dev-env-protocol.png +0 -0
  203. data/brutrb.com/images/logo-300.png +0 -0
  204. data/brutrb.com/images/logo.png +0 -0
  205. data/brutrb.com/images/overview.graffle +0 -0
  206. data/brutrb.com/images/overview.png +0 -0
  207. data/brutrb.com/images/spa.dot +19 -0
  208. data/brutrb.com/images/spa.png +0 -0
  209. data/brutrb.com/images/workspace-protocol.dot +44 -0
  210. data/brutrb.com/images/workspace-protocol.png +0 -0
  211. data/brutrb.com/index.md +36 -0
  212. data/brutrb.com/instrumentation.md +183 -0
  213. data/brutrb.com/javascript.md +122 -0
  214. data/brutrb.com/jobs.md +14 -0
  215. data/{doc-src → brutrb.com}/keyword-injection.md +122 -68
  216. data/brutrb.com/markdown-examples.md +85 -0
  217. data/brutrb.com/middleware.md +80 -0
  218. data/brutrb.com/not-released.md +5 -0
  219. data/brutrb.com/overview.md +404 -0
  220. data/brutrb.com/package-lock.json +2404 -0
  221. data/brutrb.com/package.json +11 -0
  222. data/brutrb.com/pages.md +378 -0
  223. data/brutrb.com/public/images/logo-300.png +0 -0
  224. data/brutrb.com/public/images/logo.png +0 -0
  225. data/brutrb.com/routes.md +215 -0
  226. data/brutrb.com/security.md +105 -0
  227. data/brutrb.com/seed-data.md +63 -0
  228. data/brutrb.com/space-time-continuum.md +85 -0
  229. data/brutrb.com/tutorial.md +3 -0
  230. data/brutrb.com/unit-tests.md +148 -0
  231. data/docker-compose.dx.yml +6 -3
  232. data/docs/404.html +21 -0
  233. data/docs/CNAME +1 -0
  234. data/docs/ai.html +24 -0
  235. data/docs/api/Brut/BackEnd/SeedData.html +493 -0
  236. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server/FlushSpans.html +214 -0
  237. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server.html +125 -0
  238. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares.html +125 -0
  239. data/docs/api/Brut/BackEnd/Sidekiq.html +125 -0
  240. data/docs/api/Brut/BackEnd/Validators/FormValidator.html +414 -0
  241. data/docs/api/Brut/BackEnd/Validators.html +128 -0
  242. data/docs/api/Brut/BackEnd.html +132 -0
  243. data/docs/api/Brut/CLI/App.html +1576 -0
  244. data/docs/api/Brut/CLI/AppRunner.html +491 -0
  245. data/docs/api/Brut/CLI/Apps/BuildAssets/All.html +264 -0
  246. data/docs/api/Brut/CLI/Apps/BuildAssets/CSS.html +306 -0
  247. data/docs/api/Brut/CLI/Apps/BuildAssets/Images.html +262 -0
  248. data/docs/api/Brut/CLI/Apps/BuildAssets/JS.html +314 -0
  249. data/docs/api/Brut/CLI/Apps/BuildAssets.html +183 -0
  250. data/docs/api/Brut/CLI/Apps/DB/Create.html +365 -0
  251. data/docs/api/Brut/CLI/Apps/DB/Drop.html +357 -0
  252. data/docs/api/Brut/CLI/Apps/DB/Migrate.html +383 -0
  253. data/docs/api/Brut/CLI/Apps/DB/NewMigration.html +335 -0
  254. data/docs/api/Brut/CLI/Apps/DB/Rebuild.html +329 -0
  255. data/docs/api/Brut/CLI/Apps/DB/Seed.html +347 -0
  256. data/docs/api/Brut/CLI/Apps/DB/Status.html +383 -0
  257. data/docs/api/Brut/CLI/Apps/DB.html +183 -0
  258. data/docs/api/Brut/CLI/Apps/Scaffold/Action/Route.html +303 -0
  259. data/docs/api/Brut/CLI/Apps/Scaffold/Action.html +512 -0
  260. data/docs/api/Brut/CLI/Apps/Scaffold/Component.html +398 -0
  261. data/docs/api/Brut/CLI/Apps/Scaffold/CustomElementTest.html +374 -0
  262. data/docs/api/Brut/CLI/Apps/Scaffold/E2ETest.html +410 -0
  263. data/docs/api/Brut/CLI/Apps/Scaffold/Form.html +262 -0
  264. data/docs/api/Brut/CLI/Apps/Scaffold/Page/Route.html +303 -0
  265. data/docs/api/Brut/CLI/Apps/Scaffold/Page.html +480 -0
  266. data/docs/api/Brut/CLI/Apps/Scaffold/RoutesEditor.html +450 -0
  267. data/docs/api/Brut/CLI/Apps/Scaffold/Test.html +380 -0
  268. data/docs/api/Brut/CLI/Apps/Scaffold.html +253 -0
  269. data/docs/api/Brut/CLI/Apps/Test/Audit.html +464 -0
  270. data/docs/api/Brut/CLI/Apps/Test/E2e.html +407 -0
  271. data/docs/api/Brut/CLI/Apps/Test/JS.html +262 -0
  272. data/docs/api/Brut/CLI/Apps/Test/Run.html +578 -0
  273. data/docs/api/Brut/CLI/Apps/Test.html +253 -0
  274. data/docs/api/Brut/CLI/Apps.html +125 -0
  275. data/docs/api/Brut/CLI/Command.html +2342 -0
  276. data/docs/api/Brut/CLI/Error.html +139 -0
  277. data/docs/api/Brut/CLI/ExecutionResults/Result.html +664 -0
  278. data/docs/api/Brut/CLI/ExecutionResults.html +675 -0
  279. data/docs/api/Brut/CLI/Executor.html +430 -0
  280. data/docs/api/Brut/CLI/InvalidOption.html +245 -0
  281. data/docs/api/Brut/CLI/Options.html +753 -0
  282. data/docs/api/Brut/CLI/Output.html +699 -0
  283. data/docs/api/Brut/CLI/SystemExecError.html +451 -0
  284. data/docs/api/Brut/CLI.html +263 -0
  285. data/docs/api/Brut/FactoryBot.html +225 -0
  286. data/docs/api/Brut/Framework/App.html +1097 -0
  287. data/docs/api/Brut/Framework/Config.html +1045 -0
  288. data/docs/api/Brut/Framework/Container.html +1379 -0
  289. data/docs/api/Brut/Framework/Error.html +140 -0
  290. data/docs/api/Brut/Framework/Errors/AbstractMethod.html +144 -0
  291. data/docs/api/Brut/Framework/Errors/Bug.html +234 -0
  292. data/docs/api/Brut/Framework/Errors/MissingConfiguration.html +257 -0
  293. data/docs/api/Brut/Framework/Errors/MissingParameter.html +273 -0
  294. data/docs/api/Brut/Framework/Errors/NoClassForPath.html +471 -0
  295. data/docs/api/Brut/Framework/Errors/NotFound.html +308 -0
  296. data/docs/api/Brut/Framework/Errors/NotImplemented.html +234 -0
  297. data/docs/api/Brut/Framework/Errors.html +328 -0
  298. data/docs/api/Brut/Framework/FussyTypeEnforcement.html +392 -0
  299. data/docs/api/Brut/Framework/MCP.html +861 -0
  300. data/docs/api/Brut/Framework/ProjectEnvironment.html +648 -0
  301. data/docs/api/Brut/Framework.html +129 -0
  302. data/docs/api/Brut/FrontEnd/AssetPathResolver.html +317 -0
  303. data/docs/api/Brut/FrontEnd/Component/Helpers.html +326 -0
  304. data/docs/api/Brut/FrontEnd/Component.html +365 -0
  305. data/docs/api/Brut/FrontEnd/Components/ConstraintViolations.html +470 -0
  306. data/docs/api/Brut/FrontEnd/Components/FormTag.html +518 -0
  307. data/docs/api/Brut/FrontEnd/Components/I18nTranslations.html +317 -0
  308. data/docs/api/Brut/FrontEnd/Components/Input.html +195 -0
  309. data/docs/api/Brut/FrontEnd/Components/Inputs/CsrfToken.html +339 -0
  310. data/docs/api/Brut/FrontEnd/Components/Inputs/InputTag.html +660 -0
  311. data/docs/api/Brut/FrontEnd/Components/Inputs/RadioButton.html +417 -0
  312. data/docs/api/Brut/FrontEnd/Components/Inputs/SelectTagWithOptions.html +918 -0
  313. data/docs/api/Brut/FrontEnd/Components/Inputs/TextareaTag.html +651 -0
  314. data/docs/api/Brut/FrontEnd/Components/Inputs.html +125 -0
  315. data/docs/api/Brut/FrontEnd/Components/LocaleDetection.html +367 -0
  316. data/docs/api/Brut/FrontEnd/Components/PageIdentifier.html +336 -0
  317. data/docs/api/Brut/FrontEnd/Components/TimeTag.html +655 -0
  318. data/docs/api/Brut/FrontEnd/Components/Traceparent.html +352 -0
  319. data/docs/api/Brut/FrontEnd/Components.html +135 -0
  320. data/docs/api/Brut/FrontEnd/Download.html +467 -0
  321. data/docs/api/Brut/FrontEnd/Flash.html +1150 -0
  322. data/docs/api/Brut/FrontEnd/Form.html +1157 -0
  323. data/docs/api/Brut/FrontEnd/Forms/ConstraintViolation.html +634 -0
  324. data/docs/api/Brut/FrontEnd/Forms/Input.html +615 -0
  325. data/docs/api/Brut/FrontEnd/Forms/InputDeclarations.html +547 -0
  326. data/docs/api/Brut/FrontEnd/Forms/InputDefinition.html +1318 -0
  327. data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInput.html +609 -0
  328. data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInputDefinition.html +587 -0
  329. data/docs/api/Brut/FrontEnd/Forms/SelectInput.html +613 -0
  330. data/docs/api/Brut/FrontEnd/Forms/SelectInputDefinition.html +582 -0
  331. data/docs/api/Brut/FrontEnd/Forms/ValidityState.html +609 -0
  332. data/docs/api/Brut/FrontEnd/Forms.html +127 -0
  333. data/docs/api/Brut/FrontEnd/GenericResponse.html +377 -0
  334. data/docs/api/Brut/FrontEnd/Handler.html +442 -0
  335. data/docs/api/Brut/FrontEnd/Handlers/CspReportingHandler.html +318 -0
  336. data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler/TraceParent.html +336 -0
  337. data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler.html +399 -0
  338. data/docs/api/Brut/FrontEnd/Handlers/LocaleDetectionHandler.html +354 -0
  339. data/docs/api/Brut/FrontEnd/Handlers/MissingHandler/Form.html +151 -0
  340. data/docs/api/Brut/FrontEnd/Handlers/MissingHandler.html +315 -0
  341. data/docs/api/Brut/FrontEnd/Handlers.html +125 -0
  342. data/docs/api/Brut/FrontEnd/HandlingResults.html +339 -0
  343. data/docs/api/Brut/FrontEnd/HttpMethod.html +661 -0
  344. data/docs/api/Brut/FrontEnd/HttpStatus.html +496 -0
  345. data/docs/api/Brut/FrontEnd/InlineSvgLocator.html +284 -0
  346. data/docs/api/Brut/FrontEnd/Layout.html +318 -0
  347. data/docs/api/Brut/FrontEnd/Middleware.html +135 -0
  348. data/docs/api/Brut/FrontEnd/Middlewares/AnnotateBrutOwnedPaths.html +288 -0
  349. data/docs/api/Brut/FrontEnd/Middlewares/Favicon.html +292 -0
  350. data/docs/api/Brut/FrontEnd/Middlewares/OpenTelemetrySpan.html +324 -0
  351. data/docs/api/Brut/FrontEnd/Middlewares/ReloadApp.html +372 -0
  352. data/docs/api/Brut/FrontEnd/Middlewares.html +125 -0
  353. data/docs/api/Brut/FrontEnd/Page.html +773 -0
  354. data/docs/api/Brut/FrontEnd/Pages/MissingPage.html +797 -0
  355. data/docs/api/Brut/FrontEnd/Pages.html +125 -0
  356. data/docs/api/Brut/FrontEnd/RequestContext.html +1312 -0
  357. data/docs/api/Brut/FrontEnd/RouteHook.html +424 -0
  358. data/docs/api/Brut/FrontEnd/RouteHooks/AgeFlash.html +242 -0
  359. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineScripts.html +249 -0
  360. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts/ReportOnly.html +264 -0
  361. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts.html +261 -0
  362. data/docs/api/Brut/FrontEnd/RouteHooks/LocaleDetection.html +284 -0
  363. data/docs/api/Brut/FrontEnd/RouteHooks/SetupRequestContext.html +252 -0
  364. data/docs/api/Brut/FrontEnd/RouteHooks.html +115 -0
  365. data/docs/api/Brut/FrontEnd/Routing/FormHandlerRoute.html +227 -0
  366. data/docs/api/Brut/FrontEnd/Routing/FormRoute.html +305 -0
  367. data/docs/api/Brut/FrontEnd/Routing/MissingForm.html +324 -0
  368. data/docs/api/Brut/FrontEnd/Routing/MissingHandler.html +319 -0
  369. data/docs/api/Brut/FrontEnd/Routing/MissingPage.html +315 -0
  370. data/docs/api/Brut/FrontEnd/Routing/MissingPath.html +315 -0
  371. data/docs/api/Brut/FrontEnd/Routing/PageRoute.html +327 -0
  372. data/docs/api/Brut/FrontEnd/Routing/Route.html +761 -0
  373. data/docs/api/Brut/FrontEnd/Routing.html +927 -0
  374. data/docs/api/Brut/FrontEnd/Session.html +1195 -0
  375. data/docs/api/Brut/FrontEnd.html +134 -0
  376. data/docs/api/Brut/I18n/BaseMethods.html +931 -0
  377. data/docs/api/Brut/I18n/ForBackEnd.html +302 -0
  378. data/docs/api/Brut/I18n/ForCLI.html +302 -0
  379. data/docs/api/Brut/I18n/ForHTML.html +296 -0
  380. data/docs/api/Brut/I18n/HTTPAcceptLanguage/AlwaysEnglish.html +316 -0
  381. data/docs/api/Brut/I18n/HTTPAcceptLanguage.html +930 -0
  382. data/docs/api/Brut/I18n.html +127 -0
  383. data/docs/api/Brut/Instrumentation/LoggerSpanExporter.html +435 -0
  384. data/docs/api/Brut/Instrumentation/OpenTelemetry/NormalizedAttributes.html +286 -0
  385. data/docs/api/Brut/Instrumentation/OpenTelemetry/Span.html +302 -0
  386. data/docs/api/Brut/Instrumentation/OpenTelemetry.html +864 -0
  387. data/docs/api/Brut/Instrumentation.html +126 -0
  388. data/docs/api/Brut/SinatraHelpers/ClassMethods.html +532 -0
  389. data/docs/api/Brut/SinatraHelpers.html +281 -0
  390. data/docs/api/Brut/SpecSupport/ClockSupport.html +383 -0
  391. data/docs/api/Brut/SpecSupport/ComponentSupport.html +502 -0
  392. data/docs/api/Brut/SpecSupport/E2ETestServer.html +503 -0
  393. data/docs/api/Brut/SpecSupport/E2eSupport.html +142 -0
  394. data/docs/api/Brut/SpecSupport/EnhancedNode.html +403 -0
  395. data/docs/api/Brut/SpecSupport/FlashSupport.html +278 -0
  396. data/docs/api/Brut/SpecSupport/GeneralSupport/ClassMethods.html +401 -0
  397. data/docs/api/Brut/SpecSupport/GeneralSupport.html +195 -0
  398. data/docs/api/Brut/SpecSupport/HandlerSupport.html +160 -0
  399. data/docs/api/Brut/SpecSupport/Matchers/HaveConstraintViolation.html +553 -0
  400. data/docs/api/Brut/SpecSupport/Matchers/HaveHTMLAttribute.html +439 -0
  401. data/docs/api/Brut/SpecSupport/Matchers.html +125 -0
  402. data/docs/api/Brut/SpecSupport/RSpecSetup/OptionalSidekiqSupport.html +335 -0
  403. data/docs/api/Brut/SpecSupport/RSpecSetup.html +602 -0
  404. data/docs/api/Brut/SpecSupport/SessionSupport.html +196 -0
  405. data/docs/api/Brut/SpecSupport.html +129 -0
  406. data/docs/api/Brut.html +225 -0
  407. data/docs/api/Clock.html +603 -0
  408. data/docs/api/RichString.html +968 -0
  409. data/docs/api/SemanticLogger/Appender/Async.html +219 -0
  410. data/docs/api/Sequel/Extensions/BrutInstrumentation.html +115 -0
  411. data/docs/api/Sequel/Extensions/BrutMigrations.html +533 -0
  412. data/docs/api/Sequel/Extensions.html +117 -0
  413. data/docs/api/Sequel/Plugins/CreatedAt/InstanceMethods.html +105 -0
  414. data/docs/api/Sequel/Plugins/CreatedAt.html +125 -0
  415. data/docs/api/Sequel/Plugins/ExternalId/ClassMethods.html +207 -0
  416. data/docs/api/Sequel/Plugins/ExternalId/InstanceMethods.html +186 -0
  417. data/docs/api/Sequel/Plugins/ExternalId.html +218 -0
  418. data/docs/api/Sequel/Plugins/FindBang/ClassMethods.html +202 -0
  419. data/docs/api/Sequel/Plugins/FindBang.html +125 -0
  420. data/docs/api/Sequel/Plugins.html +117 -0
  421. data/docs/api/Sequel.html +117 -0
  422. data/docs/api/_index.html +1553 -0
  423. data/docs/api/class_list.html +54 -0
  424. data/docs/api/css/common.css +1 -0
  425. data/docs/api/css/full_list.css +58 -0
  426. data/docs/api/css/style.css +503 -0
  427. data/docs/api/file.README.html +127 -0
  428. data/docs/api/file_list.html +59 -0
  429. data/docs/api/frames.html +22 -0
  430. data/docs/api/index.html +127 -0
  431. data/docs/api/js/app.js +344 -0
  432. data/docs/api/js/full_list.js +242 -0
  433. data/docs/api/js/jquery.js +4 -0
  434. data/docs/api/method_list.html +3998 -0
  435. data/docs/api/top-level-namespace.html +112 -0
  436. data/docs/assets/ai.md.tZrjP9im.js +1 -0
  437. data/docs/assets/ai.md.tZrjP9im.lean.js +1 -0
  438. data/docs/assets/app.D_yaTITQ.js +1 -0
  439. data/docs/assets/assets.md.D3wunzLx.js +19 -0
  440. data/docs/assets/assets.md.D3wunzLx.lean.js +1 -0
  441. data/docs/assets/brut-js.md.o2DAO2s2.js +12 -0
  442. data/docs/assets/brut-js.md.o2DAO2s2.lean.js +1 -0
  443. data/docs/assets/business-logic.md.BY4hGy0m.js +1 -0
  444. data/docs/assets/business-logic.md.BY4hGy0m.lean.js +1 -0
  445. data/docs/assets/chunks/@localSearchIndexroot.BsN5i0Fi.js +1 -0
  446. data/docs/assets/chunks/VPLocalSearchBox.B2-ZzyTY.js +8 -0
  447. data/docs/assets/chunks/framework.1L-BeKqY.js +18 -0
  448. data/docs/assets/chunks/theme.CfGFVRvE.js +2 -0
  449. data/docs/assets/cli.md.RmeA2b0i.js +127 -0
  450. data/docs/assets/cli.md.RmeA2b0i.lean.js +1 -0
  451. data/docs/assets/components.md.eCttGlN-.js +104 -0
  452. data/docs/assets/components.md.eCttGlN-.lean.js +1 -0
  453. data/docs/assets/configuration.md.BRriU0cL.js +78 -0
  454. data/docs/assets/configuration.md.BRriU0cL.lean.js +1 -0
  455. data/docs/assets/css.md.DJgj2clw.js +21 -0
  456. data/docs/assets/css.md.DJgj2clw.lean.js +1 -0
  457. data/docs/assets/custom-element-tests.md.BrYJQEl3.js +69 -0
  458. data/docs/assets/custom-element-tests.md.BrYJQEl3.lean.js +1 -0
  459. data/docs/assets/database-access.md.C7l-Vuvb.js +63 -0
  460. data/docs/assets/database-access.md.C7l-Vuvb.lean.js +1 -0
  461. data/docs/assets/database-schema.md.BUjR0VS1.js +63 -0
  462. data/docs/assets/database-schema.md.BUjR0VS1.lean.js +1 -0
  463. data/docs/assets/deployment.md.Dbka4OTr.js +1 -0
  464. data/docs/assets/deployment.md.Dbka4OTr.lean.js +1 -0
  465. data/docs/assets/dev-env-overview.Gj7NWM8-.png +0 -0
  466. data/docs/assets/dev-env-protocol.DysDAtnz.png +0 -0
  467. data/docs/assets/dev-environment.md.BNc8AYiK.js +11 -0
  468. data/docs/assets/dev-environment.md.BNc8AYiK.lean.js +1 -0
  469. data/docs/assets/doc-conventions.md.DCfRXXi-.js +1 -0
  470. data/docs/assets/doc-conventions.md.DCfRXXi-.lean.js +1 -0
  471. data/docs/assets/end-to-end-tests.md.yfQHC0b5.js +26 -0
  472. data/docs/assets/end-to-end-tests.md.yfQHC0b5.lean.js +1 -0
  473. data/docs/assets/flash-and-session.md.BXY8RvT0.js +93 -0
  474. data/docs/assets/flash-and-session.md.BXY8RvT0.lean.js +1 -0
  475. data/docs/assets/forms.md.CBTYQ_Cz.js +379 -0
  476. data/docs/assets/forms.md.CBTYQ_Cz.lean.js +1 -0
  477. data/docs/assets/getting-started.md.Bz2s1Vjb.js +2 -0
  478. data/docs/assets/getting-started.md.Bz2s1Vjb.lean.js +1 -0
  479. data/docs/assets/handlers.md.089DVD3v.js +69 -0
  480. data/docs/assets/handlers.md.089DVD3v.lean.js +1 -0
  481. data/docs/assets/hooks.md.C4-moMny.js +80 -0
  482. data/docs/assets/hooks.md.C4-moMny.lean.js +1 -0
  483. data/docs/assets/i18n.md.Do9i1qWl.js +23 -0
  484. data/docs/assets/i18n.md.Do9i1qWl.lean.js +1 -0
  485. data/docs/assets/index.md.B28EwVpq.js +1 -0
  486. data/docs/assets/index.md.B28EwVpq.lean.js +1 -0
  487. data/docs/assets/instrumentation.md.CL6ax7nT.js +35 -0
  488. data/docs/assets/instrumentation.md.CL6ax7nT.lean.js +1 -0
  489. data/docs/assets/javascript.md.GWbhRS51.js +31 -0
  490. data/docs/assets/javascript.md.GWbhRS51.lean.js +1 -0
  491. data/docs/assets/jobs.md.S-2amAYp.js +1 -0
  492. data/docs/assets/jobs.md.S-2amAYp.lean.js +1 -0
  493. data/docs/assets/keyword-injection.md.Dt2tKREs.js +25 -0
  494. data/docs/assets/keyword-injection.md.Dt2tKREs.lean.js +1 -0
  495. data/docs/assets/markdown-examples.md.CCFEQO44.js +33 -0
  496. data/docs/assets/markdown-examples.md.CCFEQO44.lean.js +1 -0
  497. data/docs/assets/middleware.md.Czz_UlJN.js +20 -0
  498. data/docs/assets/middleware.md.Czz_UlJN.lean.js +1 -0
  499. data/docs/assets/not-released.md.BBy28McC.js +1 -0
  500. data/docs/assets/not-released.md.BBy28McC.lean.js +1 -0
  501. data/docs/assets/overview.Da81cB9R.png +0 -0
  502. data/docs/assets/overview.md.CDalkuxV.js +133 -0
  503. data/docs/assets/overview.md.CDalkuxV.lean.js +1 -0
  504. data/docs/assets/pages.md.BE3kfOc5.js +122 -0
  505. data/docs/assets/pages.md.BE3kfOc5.lean.js +1 -0
  506. data/docs/assets/routes.md.BMM7peut.js +29 -0
  507. data/docs/assets/routes.md.BMM7peut.lean.js +1 -0
  508. data/docs/assets/security.md.C668yXCi.js +1 -0
  509. data/docs/assets/security.md.C668yXCi.lean.js +1 -0
  510. data/docs/assets/seed-data.md.BvFZlqIk.js +14 -0
  511. data/docs/assets/seed-data.md.BvFZlqIk.lean.js +1 -0
  512. data/docs/assets/spa.qejUdp-5.png +0 -0
  513. data/docs/assets/space-time-continuum.md.KPUIKysQ.js +1 -0
  514. data/docs/assets/space-time-continuum.md.KPUIKysQ.lean.js +1 -0
  515. data/docs/assets/style.D73IYGCX.css +1 -0
  516. data/docs/assets/tutorial.md.BnoGjrdK.js +1 -0
  517. data/docs/assets/tutorial.md.BnoGjrdK.lean.js +1 -0
  518. data/docs/assets/unit-tests.md.DUGrnLj5.js +13 -0
  519. data/docs/assets/unit-tests.md.DUGrnLj5.lean.js +1 -0
  520. data/docs/assets/workspace-protocol.C0gXsoDb.png +0 -0
  521. data/docs/assets.html +42 -0
  522. data/docs/brut-css/brut.css +1 -0
  523. data/docs/brut-css/brut.max.css +22372 -0
  524. data/docs/brut-css/classes/appearances.html +783 -0
  525. data/docs/brut-css/classes/background-colors.html +3529 -0
  526. data/docs/brut-css/classes/border-colors.html +3529 -0
  527. data/docs/brut-css/classes/borders.html +2293 -0
  528. data/docs/brut-css/classes/dimensions.html +2581 -0
  529. data/docs/brut-css/classes/flex.html +917 -0
  530. data/docs/brut-css/classes/foreground-colors.html +3261 -0
  531. data/docs/brut-css/classes/junk-drawer.html +431 -0
  532. data/docs/brut-css/classes/layout.html +668 -0
  533. data/docs/brut-css/classes/lists.html +331 -0
  534. data/docs/brut-css/classes/positioning.html +1751 -0
  535. data/docs/brut-css/classes/spacings.html +2633 -0
  536. data/docs/brut-css/classes/typography.html +2206 -0
  537. data/docs/brut-css/customization/advanced-configuration.html +204 -0
  538. data/docs/brut-css/customization/breakpoints.html +227 -0
  539. data/docs/brut-css/customization/design-system.html +197 -0
  540. data/docs/brut-css/customization/pseudo-classes.html +228 -0
  541. data/docs/brut-css/docs.css +98 -0
  542. data/docs/brut-css/getting-started/core-concepts.html +234 -0
  543. data/docs/brut-css/getting-started/installation.html +190 -0
  544. data/docs/brut-css/getting-started/overview.html +210 -0
  545. data/docs/brut-css/getting-started/simple-example.html +285 -0
  546. data/docs/brut-css/index.html +193 -0
  547. data/docs/brut-css/prism-twilight.min.css +1 -0
  548. data/docs/brut-css/properties/colors.html +1548 -0
  549. data/docs/brut-css/properties/spacings.html +614 -0
  550. data/docs/brut-css/properties/typography.html +777 -0
  551. data/docs/brut-js/api/AjaxSubmit.html +374 -0
  552. data/docs/brut-js/api/AjaxSubmit.js.html +435 -0
  553. data/docs/brut-js/api/Autosubmit.html +192 -0
  554. data/docs/brut-js/api/Autosubmit.js.html +114 -0
  555. data/docs/brut-js/api/BaseCustomElement.html +1091 -0
  556. data/docs/brut-js/api/BaseCustomElement.js.html +312 -0
  557. data/docs/brut-js/api/BrutCustomElements.html +172 -0
  558. data/docs/brut-js/api/BufferedLogger.html +173 -0
  559. data/docs/brut-js/api/ConfirmSubmit.html +278 -0
  560. data/docs/brut-js/api/ConfirmSubmit.js.html +167 -0
  561. data/docs/brut-js/api/ConfirmationDialog.html +425 -0
  562. data/docs/brut-js/api/ConfirmationDialog.js.html +194 -0
  563. data/docs/brut-js/api/ConstraintViolationMessage.html +448 -0
  564. data/docs/brut-js/api/ConstraintViolationMessage.js.html +176 -0
  565. data/docs/brut-js/api/ConstraintViolationMessages.html +590 -0
  566. data/docs/brut-js/api/ConstraintViolationMessages.js.html +149 -0
  567. data/docs/brut-js/api/CopyToClipboard.html +345 -0
  568. data/docs/brut-js/api/CopyToClipboard.js.html +147 -0
  569. data/docs/brut-js/api/Form.html +294 -0
  570. data/docs/brut-js/api/Form.js.html +202 -0
  571. data/docs/brut-js/api/I18nTranslation.html +409 -0
  572. data/docs/brut-js/api/I18nTranslation.js.html +112 -0
  573. data/docs/brut-js/api/LocaleDetection.html +312 -0
  574. data/docs/brut-js/api/LocaleDetection.js.html +168 -0
  575. data/docs/brut-js/api/Logger.html +702 -0
  576. data/docs/brut-js/api/Logger.js.html +141 -0
  577. data/docs/brut-js/api/Message.html +238 -0
  578. data/docs/brut-js/api/Message.js.html +107 -0
  579. data/docs/brut-js/api/PrefixedLogger.html +369 -0
  580. data/docs/brut-js/api/RichString.html +1049 -0
  581. data/docs/brut-js/api/RichString.js.html +164 -0
  582. data/docs/brut-js/api/Tabs.html +295 -0
  583. data/docs/brut-js/api/Tabs.js.html +219 -0
  584. data/docs/brut-js/api/Tracing.html +277 -0
  585. data/docs/brut-js/api/Tracing.js.html +298 -0
  586. data/docs/brut-js/api/external-CustomElementRegistry.html +140 -0
  587. data/docs/brut-js/api/external-Performance.html +138 -0
  588. data/docs/brut-js/api/external-Promise.html +138 -0
  589. data/docs/brut-js/api/external-ValidityState.html +138 -0
  590. data/docs/brut-js/api/external-Window.html +233 -0
  591. data/docs/brut-js/api/external-fetch.html +138 -0
  592. data/docs/brut-js/api/global.html +400 -0
  593. data/docs/brut-js/api/index.html +168 -0
  594. data/docs/brut-js/api/index.js.html +181 -0
  595. data/docs/brut-js/api/module-testing.html +383 -0
  596. data/docs/brut-js/api/scripts/linenumber.js +25 -0
  597. data/docs/brut-js/api/scripts/prettify/Apache-License-2.0.txt +202 -0
  598. data/docs/brut-js/api/scripts/prettify/lang-css.js +2 -0
  599. data/docs/brut-js/api/scripts/prettify/prettify.js +28 -0
  600. data/docs/brut-js/api/styles/jsdoc-default.css +327 -0
  601. data/docs/brut-js/api/styles/prettify-jsdoc.css +111 -0
  602. data/docs/brut-js/api/styles/prettify-tomorrow.css +132 -0
  603. data/docs/brut-js/api/testing.AssetMetadata.html +172 -0
  604. data/docs/brut-js/api/testing.AssetMetadataLoader.html +171 -0
  605. data/docs/brut-js/api/testing.CustomElementTest.html +679 -0
  606. data/docs/brut-js/api/testing.DOMCreator.html +171 -0
  607. data/docs/brut-js/api/testing_AssetMetadata.js.html +86 -0
  608. data/docs/brut-js/api/testing_AssetMetadataLoader.js.html +76 -0
  609. data/docs/brut-js/api/testing_CustomElementTest.js.html +286 -0
  610. data/docs/brut-js/api/testing_DOMCreator.js.html +96 -0
  611. data/docs/brut-js/api/testing_index.js.html +99 -0
  612. data/docs/brut-js.html +35 -0
  613. data/docs/business-logic.html +24 -0
  614. data/docs/cli.html +150 -0
  615. data/docs/components.html +127 -0
  616. data/docs/configuration.html +101 -0
  617. data/docs/css.html +44 -0
  618. data/docs/custom-element-tests.html +92 -0
  619. data/docs/database-access.html +86 -0
  620. data/docs/database-schema.html +86 -0
  621. data/docs/deployment.html +24 -0
  622. data/docs/dev-environment.html +34 -0
  623. data/docs/doc-conventions.html +24 -0
  624. data/docs/end-to-end-tests.html +49 -0
  625. data/docs/flash-and-session.html +116 -0
  626. data/docs/forms.html +402 -0
  627. data/docs/getting-started.html +25 -0
  628. data/docs/handlers.html +92 -0
  629. data/docs/hashmap.json +1 -0
  630. data/docs/hooks.html +103 -0
  631. data/docs/i18n.html +46 -0
  632. data/docs/images/logo-300.png +0 -0
  633. data/docs/images/logo.png +0 -0
  634. data/docs/index.html +24 -0
  635. data/docs/instrumentation.html +58 -0
  636. data/docs/javascript.html +54 -0
  637. data/docs/jobs.html +24 -0
  638. data/docs/keyword-injection.html +48 -0
  639. data/docs/markdown-examples.html +56 -0
  640. data/docs/middleware.html +43 -0
  641. data/docs/not-released.html +24 -0
  642. data/docs/overview.html +156 -0
  643. data/docs/pages.html +145 -0
  644. data/docs/routes.html +52 -0
  645. data/docs/security.html +24 -0
  646. data/docs/seed-data.html +37 -0
  647. data/docs/space-time-continuum.html +24 -0
  648. data/docs/tutorial.html +24 -0
  649. data/docs/unit-tests.html +36 -0
  650. data/docs/vp-icons.css +1 -0
  651. data/lib/brut/back_end/seed_data.rb +19 -2
  652. data/lib/brut/back_end/sidekiq/middlewares/server.rb +2 -1
  653. data/lib/brut/back_end/sidekiq/middlewares.rb +2 -1
  654. data/lib/brut/back_end/sidekiq.rb +2 -1
  655. data/lib/brut/back_end/validator.rb +5 -1
  656. data/lib/brut/back_end.rb +4 -2
  657. data/lib/brut/cli/app_runner.rb +1 -1
  658. data/lib/brut/cli/apps/test.rb +5 -0
  659. data/lib/brut/cli.rb +4 -3
  660. data/lib/brut/factory_bot.rb +0 -5
  661. data/lib/brut/framework/app.rb +70 -5
  662. data/lib/brut/framework/config.rb +5 -3
  663. data/lib/brut/framework/container.rb +3 -2
  664. data/lib/brut/framework/errors.rb +12 -4
  665. data/lib/brut/framework/mcp.rb +58 -1
  666. data/lib/brut/framework/project_environment.rb +6 -2
  667. data/lib/brut/framework.rb +1 -1
  668. data/lib/brut/front_end/component.rb +69 -71
  669. data/lib/brut/front_end/components/constraint_violations.rb +1 -4
  670. data/lib/brut/front_end/components/form_tag.rb +1 -1
  671. data/lib/brut/front_end/components/input.rb +3 -3
  672. data/lib/brut/front_end/components/inputs/csrf_token.rb +1 -1
  673. data/lib/brut/front_end/components/inputs/{text_field.rb → input_tag.rb} +7 -9
  674. data/lib/brut/front_end/components/inputs/radio_button.rb +1 -1
  675. data/lib/brut/front_end/components/inputs/select_tag_with_options.rb +187 -0
  676. data/lib/brut/front_end/components/inputs/{textarea.rb → textarea_tag.rb} +2 -2
  677. data/lib/brut/front_end/components/time_tag.rb +2 -1
  678. data/lib/brut/front_end/form.rb +4 -4
  679. data/lib/brut/front_end/forms/input.rb +2 -1
  680. data/lib/brut/front_end/forms/input_definition.rb +5 -2
  681. data/lib/brut/front_end/forms/radio_button_group_input.rb +2 -1
  682. data/lib/brut/front_end/forms/radio_button_group_input_definition.rb +2 -2
  683. data/lib/brut/front_end/forms/select_input.rb +2 -4
  684. data/lib/brut/front_end/forms/select_input_definition.rb +2 -2
  685. data/lib/brut/front_end/handler.rb +28 -26
  686. data/lib/brut/front_end/handlers/csp_reporting_handler.rb +5 -2
  687. data/lib/brut/front_end/handlers/instrumentation_handler.rb +8 -4
  688. data/lib/brut/front_end/handlers/locale_detection_handler.rb +9 -5
  689. data/lib/brut/front_end/handlers/missing_handler.rb +5 -2
  690. data/lib/brut/front_end/layout.rb +16 -0
  691. data/lib/brut/front_end/page.rb +52 -29
  692. data/lib/brut/front_end/request_context.rb +3 -2
  693. data/lib/brut/front_end/routing.rb +5 -1
  694. data/lib/brut/front_end.rb +4 -13
  695. data/lib/brut/i18n/base_methods.rb +167 -79
  696. data/lib/brut/i18n/for_back_end.rb +4 -0
  697. data/lib/brut/i18n/for_cli.rb +4 -0
  698. data/lib/brut/i18n/for_html.rb +32 -4
  699. data/lib/brut/i18n/http_accept_language.rb +47 -0
  700. data/lib/brut/instrumentation/open_telemetry.rb +36 -1
  701. data/lib/brut/instrumentation.rb +3 -5
  702. data/lib/brut/sinatra_helpers.rb +11 -3
  703. data/lib/brut/spec_support/component_support.rb +30 -16
  704. data/lib/brut/spec_support/e2e_support.rb +1 -1
  705. data/lib/brut/spec_support/e2e_test_server.rb +3 -0
  706. data/lib/brut/spec_support/general_support.rb +3 -0
  707. data/lib/brut/spec_support/handler_support.rb +6 -1
  708. data/lib/brut/spec_support/matcher.rb +1 -0
  709. data/lib/brut/spec_support/matchers/be_page_for.rb +1 -0
  710. data/lib/brut/spec_support/matchers/have_html_attribute.rb +1 -0
  711. data/lib/brut/spec_support/matchers/have_i18n_string.rb +2 -5
  712. data/lib/brut/spec_support/matchers/have_link_to.rb +1 -0
  713. data/lib/brut/spec_support/matchers/have_redirected_to.rb +1 -0
  714. data/lib/brut/spec_support/matchers/have_rendered.rb +1 -0
  715. data/lib/brut/spec_support/matchers/have_returned_rack_response.rb +44 -0
  716. data/lib/brut/spec_support.rb +1 -1
  717. data/lib/brut/version.rb +1 -1
  718. data/lib/brut.rb +5 -4
  719. data/lib/sequel/extensions/brut_migrations.rb +1 -1
  720. metadata +648 -13
  721. data/doc-src/architecture.md +0 -102
  722. data/doc-src/assets.md +0 -98
  723. data/doc-src/forms.md +0 -214
  724. data/doc-src/handlers.md +0 -83
  725. data/doc-src/javascript.md +0 -265
  726. data/doc-src/pages.md +0 -210
  727. data/doc-src/route-hooks.md +0 -59
  728. data/lib/brut/front_end/components/inputs/select.rb +0 -117
data/docs/brut-css/classes/background-colors.html ADDED
@@ -0,0 +1,3529 @@
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="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
+