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/foreground-colors.html ADDED
@@ -0,0 +1,3261 @@
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">Foreground Colors Classes</h2>
159
+
160
+ <p>Foreground colors. For red, orange, yellow, green, blue, purple, and gray, there are nine steps in the scale, from 100 being darkest to 900 being lightest. Black and white have only two steps: pure black/white and slightly off black/white. The colors and shades are shown in the table below.</p>
161
+
162
+ <div class="pa-3 inset-shadow-1 br-3 mb-3">
163
+ <table class="collapse">
164
+ <thead>
165
+ <tr>
166
+ <th role="none"></th>
167
+
168
+ <th class="pa-2 tc ff-mono">100</th>
169
+
170
+ <th class="pa-2 tc ff-mono">200</th>
171
+
172
+ <th class="pa-2 tc ff-mono">300</th>
173
+
174
+ <th class="pa-2 tc ff-mono">400</th>
175
+
176
+ <th class="pa-2 tc ff-mono">500</th>
177
+
178
+ <th class="pa-2 tc ff-mono">600</th>
179
+
180
+ <th class="pa-2 tc ff-mono">700</th>
181
+
182
+ <th class="pa-2 tc ff-mono">800</th>
183
+
184
+ <th class="pa-2 tc ff-mono">900</th>
185
+
186
+ </tr>
187
+ </thead>
188
+
189
+
190
+ <tr>
191
+ <th class="pa-2 tr ff-mono">Red</th>
192
+
193
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-red-100">&nbsp;</div></td>
194
+
195
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-red-200">&nbsp;</div></td>
196
+
197
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-red-300">&nbsp;</div></td>
198
+
199
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-red-400">&nbsp;</div></td>
200
+
201
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-red-500">&nbsp;</div></td>
202
+
203
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-red-600">&nbsp;</div></td>
204
+
205
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-red-700">&nbsp;</div></td>
206
+
207
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-red-800">&nbsp;</div></td>
208
+
209
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-red-900">&nbsp;</div></td>
210
+
211
+ </tr>
212
+
213
+
214
+ <tr>
215
+ <th class="pa-2 tr ff-mono">Orange</th>
216
+
217
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-orange-100">&nbsp;</div></td>
218
+
219
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-orange-200">&nbsp;</div></td>
220
+
221
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-orange-300">&nbsp;</div></td>
222
+
223
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-orange-400">&nbsp;</div></td>
224
+
225
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-orange-500">&nbsp;</div></td>
226
+
227
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-orange-600">&nbsp;</div></td>
228
+
229
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-orange-700">&nbsp;</div></td>
230
+
231
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-orange-800">&nbsp;</div></td>
232
+
233
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-orange-900">&nbsp;</div></td>
234
+
235
+ </tr>
236
+
237
+
238
+ <tr>
239
+ <th class="pa-2 tr ff-mono">Yellow</th>
240
+
241
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-yellow-100">&nbsp;</div></td>
242
+
243
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-yellow-200">&nbsp;</div></td>
244
+
245
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-yellow-300">&nbsp;</div></td>
246
+
247
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-yellow-400">&nbsp;</div></td>
248
+
249
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-yellow-500">&nbsp;</div></td>
250
+
251
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-yellow-600">&nbsp;</div></td>
252
+
253
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-yellow-700">&nbsp;</div></td>
254
+
255
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-yellow-800">&nbsp;</div></td>
256
+
257
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-yellow-900">&nbsp;</div></td>
258
+
259
+ </tr>
260
+
261
+
262
+ <tr>
263
+ <th class="pa-2 tr ff-mono">Green</th>
264
+
265
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-green-100">&nbsp;</div></td>
266
+
267
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-green-200">&nbsp;</div></td>
268
+
269
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-green-300">&nbsp;</div></td>
270
+
271
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-green-400">&nbsp;</div></td>
272
+
273
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-green-500">&nbsp;</div></td>
274
+
275
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-green-600">&nbsp;</div></td>
276
+
277
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-green-700">&nbsp;</div></td>
278
+
279
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-green-800">&nbsp;</div></td>
280
+
281
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-green-900">&nbsp;</div></td>
282
+
283
+ </tr>
284
+
285
+
286
+ <tr>
287
+ <th class="pa-2 tr ff-mono">Blue</th>
288
+
289
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-blue-100">&nbsp;</div></td>
290
+
291
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-blue-200">&nbsp;</div></td>
292
+
293
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-blue-300">&nbsp;</div></td>
294
+
295
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-blue-400">&nbsp;</div></td>
296
+
297
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-blue-500">&nbsp;</div></td>
298
+
299
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-blue-600">&nbsp;</div></td>
300
+
301
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-blue-700">&nbsp;</div></td>
302
+
303
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-blue-800">&nbsp;</div></td>
304
+
305
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-blue-900">&nbsp;</div></td>
306
+
307
+ </tr>
308
+
309
+
310
+ <tr>
311
+ <th class="pa-2 tr ff-mono">Purple</th>
312
+
313
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-purple-100">&nbsp;</div></td>
314
+
315
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-purple-200">&nbsp;</div></td>
316
+
317
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-purple-300">&nbsp;</div></td>
318
+
319
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-purple-400">&nbsp;</div></td>
320
+
321
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-purple-500">&nbsp;</div></td>
322
+
323
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-purple-600">&nbsp;</div></td>
324
+
325
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-purple-700">&nbsp;</div></td>
326
+
327
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-purple-800">&nbsp;</div></td>
328
+
329
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-purple-900">&nbsp;</div></td>
330
+
331
+ </tr>
332
+
333
+
334
+ <tr>
335
+ <th class="pa-2 tr ff-mono">Gray</th>
336
+
337
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-gray-100">&nbsp;</div></td>
338
+
339
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-gray-200">&nbsp;</div></td>
340
+
341
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-gray-300">&nbsp;</div></td>
342
+
343
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-gray-400">&nbsp;</div></td>
344
+
345
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-gray-500">&nbsp;</div></td>
346
+
347
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-gray-600">&nbsp;</div></td>
348
+
349
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-gray-700">&nbsp;</div></td>
350
+
351
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-gray-800">&nbsp;</div></td>
352
+
353
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-gray-900">&nbsp;</div></td>
354
+
355
+ </tr>
356
+
357
+
358
+ <thead>
359
+ <tr>
360
+ <th role="none"></th>
361
+ <th class="pa-2 tc"><em class="fw-normal">pure</em></th>
362
+ <th class="pa-2 tc ff-mono">-ish</th>
363
+ </tr>
364
+ </thead>
365
+
366
+ <tr>
367
+ <th class="pa-2 tr ff-mono">Black</th>
368
+
369
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-black">&nbsp;</div></td>
370
+
371
+ <td class="pa-2"><div class="br-3 w-4 h-3 bg-black-ish">&nbsp;</div></td>
372
+
373
+ </tr>
374
+
375
+
376
+ <tr>
377
+ <th class="pa-2 tr ff-mono">White</th>
378
+
379
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-white">&nbsp;</div></td>
380
+
381
+ <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-white-ish">&nbsp;</div></td>
382
+
383
+ </tr>
384
+
385
+ </table>
386
+ </div>
387
+
388
+
389
+
390
+ <h3 class="f-2 b">See Also</h3>
391
+ <ul class="see-also">
392
+
393
+ <li><p><a href="/brut-css/properties/colors.html">Colors</a></p>
394
+ </li>
395
+
396
+ </ul>
397
+
398
+
399
+ <h3 class="f-5 mt-4" id="class-scale:foreground-red">Red</h3>
400
+ <p class="p">
401
+ <p>Red shades.</p>
402
+
403
+ </p>
404
+
405
+ <h4 class="f-2 b">See Also</h3>
406
+ <ul class="see-also">
407
+
408
+ <li><p><a href="/brut-css/properties/colors.html#property-scale:red">Red</a></p>
409
+ </li>
410
+
411
+ </ul>
412
+
413
+
414
+ <div class="mt-4 flex gap-3 items-center justify-between" id="red-100">
415
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.red-100</code></h4>
416
+ <pre class="f-3 highlighted-code"><span class="token selector">.red-100</span> <span class="token punctuation">{</span>
417
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
418
+ <span class="token punctuation">}</span></pre>
419
+ </div>
420
+ <div class="ml-3">
421
+ <p class="p">
422
+ <p>Red at weight 100 (darkest).</p>
423
+
424
+ </p>
425
+
426
+
427
+ <h5 class="f-2 ttu">
428
+
429
+ Example
430
+
431
+ </h5>
432
+
433
+
434
+ <div class="mv-3 example">
435
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
436
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
437
+ .red-100
438
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
439
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
440
+ <div class="example-demonstration">
441
+
442
+ <div class="bg-white pa-2">
443
+ <code class="red-100">
444
+ .red-100
445
+ </code>
446
+ </div>
447
+
448
+ </div>
449
+ </div>
450
+
451
+
452
+ </div>
453
+
454
+ <div class="mt-4 flex gap-3 items-center justify-between" id="red-200">
455
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.red-200</code></h4>
456
+ <pre class="f-3 highlighted-code"><span class="token selector">.red-200</span> <span class="token punctuation">{</span>
457
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
458
+ <span class="token punctuation">}</span></pre>
459
+ </div>
460
+ <div class="ml-3">
461
+ <p class="p">
462
+ <p>Red at weight 200 (second darkest).</p>
463
+
464
+ </p>
465
+
466
+
467
+ <h5 class="f-2 ttu">
468
+
469
+ Example
470
+
471
+ </h5>
472
+
473
+
474
+ <div class="mv-3 example">
475
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
476
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
477
+ .red-200
478
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
479
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
480
+ <div class="example-demonstration">
481
+
482
+ <div class="bg-white pa-2">
483
+ <code class="red-200">
484
+ .red-200
485
+ </code>
486
+ </div>
487
+
488
+ </div>
489
+ </div>
490
+
491
+
492
+ </div>
493
+
494
+ <div class="mt-4 flex gap-3 items-center justify-between" id="red-300">
495
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.red-300</code></h4>
496
+ <pre class="f-3 highlighted-code"><span class="token selector">.red-300</span> <span class="token punctuation">{</span>
497
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
498
+ <span class="token punctuation">}</span></pre>
499
+ </div>
500
+ <div class="ml-3">
501
+ <p class="p">
502
+ <p>Red at weight 300.</p>
503
+
504
+ </p>
505
+
506
+
507
+ <h5 class="f-2 ttu">
508
+
509
+ Example
510
+
511
+ </h5>
512
+
513
+
514
+ <div class="mv-3 example">
515
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
516
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
517
+ .red-300
518
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
519
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
520
+ <div class="example-demonstration">
521
+
522
+ <div class="bg-white pa-2">
523
+ <code class="red-300">
524
+ .red-300
525
+ </code>
526
+ </div>
527
+
528
+ </div>
529
+ </div>
530
+
531
+
532
+ </div>
533
+
534
+ <div class="mt-4 flex gap-3 items-center justify-between" id="red-400">
535
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.red-400</code></h4>
536
+ <pre class="f-3 highlighted-code"><span class="token selector">.red-400</span> <span class="token punctuation">{</span>
537
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
538
+ <span class="token punctuation">}</span></pre>
539
+ </div>
540
+ <div class="ml-3">
541
+ <p class="p">
542
+ <p>Red at weight 400.</p>
543
+
544
+ </p>
545
+
546
+
547
+ <h5 class="f-2 ttu">
548
+
549
+ Example
550
+
551
+ </h5>
552
+
553
+
554
+ <div class="mv-3 example">
555
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
556
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
557
+ .red-400
558
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
559
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
560
+ <div class="example-demonstration">
561
+
562
+ <div class="bg-white pa-2">
563
+ <code class="red-400">
564
+ .red-400
565
+ </code>
566
+ </div>
567
+
568
+ </div>
569
+ </div>
570
+
571
+
572
+ </div>
573
+
574
+ <div class="mt-4 flex gap-3 items-center justify-between" id="red-500">
575
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.red-500</code></h4>
576
+ <pre class="f-3 highlighted-code"><span class="token selector">.red-500</span> <span class="token punctuation">{</span>
577
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
578
+ <span class="token punctuation">}</span></pre>
579
+ </div>
580
+ <div class="ml-3">
581
+ <p class="p">
582
+ <p>Red at weight 500.</p>
583
+
584
+ </p>
585
+
586
+
587
+ <h5 class="f-2 ttu">
588
+
589
+ Example
590
+
591
+ </h5>
592
+
593
+
594
+ <div class="mv-3 example">
595
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
596
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
597
+ .red-500
598
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
599
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
600
+ <div class="example-demonstration">
601
+
602
+ <div class="bg-black pa-2">
603
+ <code class="red-500">
604
+ .red-500
605
+ </code>
606
+ </div>
607
+
608
+ </div>
609
+ </div>
610
+
611
+
612
+ </div>
613
+
614
+ <div class="mt-4 flex gap-3 items-center justify-between" id="red-600">
615
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.red-600</code></h4>
616
+ <pre class="f-3 highlighted-code"><span class="token selector">.red-600</span> <span class="token punctuation">{</span>
617
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
618
+ <span class="token punctuation">}</span></pre>
619
+ </div>
620
+ <div class="ml-3">
621
+ <p class="p">
622
+ <p>Red at weight 600 ().</p>
623
+
624
+ </p>
625
+
626
+
627
+ <h5 class="f-2 ttu">
628
+
629
+ Example
630
+
631
+ </h5>
632
+
633
+
634
+ <div class="mv-3 example">
635
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
636
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
637
+ .red-600
638
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
639
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
640
+ <div class="example-demonstration">
641
+
642
+ <div class="bg-black pa-2">
643
+ <code class="red-600">
644
+ .red-600
645
+ </code>
646
+ </div>
647
+
648
+ </div>
649
+ </div>
650
+
651
+
652
+ </div>
653
+
654
+ <div class="mt-4 flex gap-3 items-center justify-between" id="red-700">
655
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.red-700</code></h4>
656
+ <pre class="f-3 highlighted-code"><span class="token selector">.red-700</span> <span class="token punctuation">{</span>
657
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
658
+ <span class="token punctuation">}</span></pre>
659
+ </div>
660
+ <div class="ml-3">
661
+ <p class="p">
662
+ <p>Red at weight 700 ().</p>
663
+
664
+ </p>
665
+
666
+
667
+ <h5 class="f-2 ttu">
668
+
669
+ Example
670
+
671
+ </h5>
672
+
673
+
674
+ <div class="mv-3 example">
675
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
676
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-700<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
677
+ .red-700
678
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
679
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
680
+ <div class="example-demonstration">
681
+
682
+ <div class="bg-black pa-2">
683
+ <code class="red-700">
684
+ .red-700
685
+ </code>
686
+ </div>
687
+
688
+ </div>
689
+ </div>
690
+
691
+
692
+ </div>
693
+
694
+ <div class="mt-4 flex gap-3 items-center justify-between" id="red-800">
695
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.red-800</code></h4>
696
+ <pre class="f-3 highlighted-code"><span class="token selector">.red-800</span> <span class="token punctuation">{</span>
697
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
698
+ <span class="token punctuation">}</span></pre>
699
+ </div>
700
+ <div class="ml-3">
701
+ <p class="p">
702
+ <p>Red at weight 800 (second lightest).</p>
703
+
704
+ </p>
705
+
706
+
707
+ <h5 class="f-2 ttu">
708
+
709
+ Example
710
+
711
+ </h5>
712
+
713
+
714
+ <div class="mv-3 example">
715
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
716
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
717
+ .red-800
718
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
719
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
720
+ <div class="example-demonstration">
721
+
722
+ <div class="bg-black pa-2">
723
+ <code class="red-800">
724
+ .red-800
725
+ </code>
726
+ </div>
727
+
728
+ </div>
729
+ </div>
730
+
731
+
732
+ </div>
733
+
734
+ <div class="mt-4 flex gap-3 items-center justify-between" id="red-900">
735
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.red-900</code></h4>
736
+ <pre class="f-3 highlighted-code"><span class="token selector">.red-900</span> <span class="token punctuation">{</span>
737
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
738
+ <span class="token punctuation">}</span></pre>
739
+ </div>
740
+ <div class="ml-3">
741
+ <p class="p">
742
+ <p>Red at weight 900 (lightest).</p>
743
+
744
+ </p>
745
+
746
+
747
+ <h5 class="f-2 ttu">
748
+
749
+ Example
750
+
751
+ </h5>
752
+
753
+
754
+ <div class="mv-3 example">
755
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
756
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-900<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
757
+ .red-900
758
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
759
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
760
+ <div class="example-demonstration">
761
+
762
+ <div class="bg-black pa-2">
763
+ <code class="red-900">
764
+ .red-900
765
+ </code>
766
+ </div>
767
+
768
+ </div>
769
+ </div>
770
+
771
+
772
+ </div>
773
+
774
+
775
+ <h3 class="f-5 mt-4" id="class-scale:foreground-orange">Orange</h3>
776
+ <p class="p">
777
+ <p>Orange shades.</p>
778
+
779
+ </p>
780
+
781
+ <h4 class="f-2 b">See Also</h3>
782
+ <ul class="see-also">
783
+
784
+ <li><p><a href="/brut-css/properties/colors.html#property-scale:orange">Orange</a></p>
785
+ </li>
786
+
787
+ </ul>
788
+
789
+
790
+ <div class="mt-4 flex gap-3 items-center justify-between" id="orange-100">
791
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-100</code></h4>
792
+ <pre class="f-3 highlighted-code"><span class="token selector">.orange-100</span> <span class="token punctuation">{</span>
793
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
794
+ <span class="token punctuation">}</span></pre>
795
+ </div>
796
+ <div class="ml-3">
797
+ <p class="p">
798
+ <p>Orange at weight 100 (darkest).</p>
799
+
800
+ </p>
801
+
802
+
803
+ <h5 class="f-2 ttu">
804
+
805
+ Example
806
+
807
+ </h5>
808
+
809
+
810
+ <div class="mv-3 example">
811
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
812
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
813
+ .orange-100
814
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
815
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
816
+ <div class="example-demonstration">
817
+
818
+ <div class="bg-white pa-2">
819
+ <code class="orange-100">
820
+ .orange-100
821
+ </code>
822
+ </div>
823
+
824
+ </div>
825
+ </div>
826
+
827
+
828
+ </div>
829
+
830
+ <div class="mt-4 flex gap-3 items-center justify-between" id="orange-200">
831
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-200</code></h4>
832
+ <pre class="f-3 highlighted-code"><span class="token selector">.orange-200</span> <span class="token punctuation">{</span>
833
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
834
+ <span class="token punctuation">}</span></pre>
835
+ </div>
836
+ <div class="ml-3">
837
+ <p class="p">
838
+ <p>Orange at weight 200 (second darkest).</p>
839
+
840
+ </p>
841
+
842
+
843
+ <h5 class="f-2 ttu">
844
+
845
+ Example
846
+
847
+ </h5>
848
+
849
+
850
+ <div class="mv-3 example">
851
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
852
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
853
+ .orange-200
854
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
855
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
856
+ <div class="example-demonstration">
857
+
858
+ <div class="bg-white pa-2">
859
+ <code class="orange-200">
860
+ .orange-200
861
+ </code>
862
+ </div>
863
+
864
+ </div>
865
+ </div>
866
+
867
+
868
+ </div>
869
+
870
+ <div class="mt-4 flex gap-3 items-center justify-between" id="orange-300">
871
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-300</code></h4>
872
+ <pre class="f-3 highlighted-code"><span class="token selector">.orange-300</span> <span class="token punctuation">{</span>
873
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
874
+ <span class="token punctuation">}</span></pre>
875
+ </div>
876
+ <div class="ml-3">
877
+ <p class="p">
878
+ <p>Orange at weight 300.</p>
879
+
880
+ </p>
881
+
882
+
883
+ <h5 class="f-2 ttu">
884
+
885
+ Example
886
+
887
+ </h5>
888
+
889
+
890
+ <div class="mv-3 example">
891
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
892
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
893
+ .orange-300
894
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
895
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
896
+ <div class="example-demonstration">
897
+
898
+ <div class="bg-white pa-2">
899
+ <code class="orange-300">
900
+ .orange-300
901
+ </code>
902
+ </div>
903
+
904
+ </div>
905
+ </div>
906
+
907
+
908
+ </div>
909
+
910
+ <div class="mt-4 flex gap-3 items-center justify-between" id="orange-400">
911
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-400</code></h4>
912
+ <pre class="f-3 highlighted-code"><span class="token selector">.orange-400</span> <span class="token punctuation">{</span>
913
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
914
+ <span class="token punctuation">}</span></pre>
915
+ </div>
916
+ <div class="ml-3">
917
+ <p class="p">
918
+ <p>Orange at weight 400.</p>
919
+
920
+ </p>
921
+
922
+
923
+ <h5 class="f-2 ttu">
924
+
925
+ Example
926
+
927
+ </h5>
928
+
929
+
930
+ <div class="mv-3 example">
931
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
932
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
933
+ .orange-400
934
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
935
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
936
+ <div class="example-demonstration">
937
+
938
+ <div class="bg-white pa-2">
939
+ <code class="orange-400">
940
+ .orange-400
941
+ </code>
942
+ </div>
943
+
944
+ </div>
945
+ </div>
946
+
947
+
948
+ </div>
949
+
950
+ <div class="mt-4 flex gap-3 items-center justify-between" id="orange-500">
951
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-500</code></h4>
952
+ <pre class="f-3 highlighted-code"><span class="token selector">.orange-500</span> <span class="token punctuation">{</span>
953
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
954
+ <span class="token punctuation">}</span></pre>
955
+ </div>
956
+ <div class="ml-3">
957
+ <p class="p">
958
+ <p>Orange at weight 500.</p>
959
+
960
+ </p>
961
+
962
+
963
+ <h5 class="f-2 ttu">
964
+
965
+ Example
966
+
967
+ </h5>
968
+
969
+
970
+ <div class="mv-3 example">
971
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
972
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
973
+ .orange-500
974
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
975
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
976
+ <div class="example-demonstration">
977
+
978
+ <div class="bg-black pa-2">
979
+ <code class="orange-500">
980
+ .orange-500
981
+ </code>
982
+ </div>
983
+
984
+ </div>
985
+ </div>
986
+
987
+
988
+ </div>
989
+
990
+ <div class="mt-4 flex gap-3 items-center justify-between" id="orange-600">
991
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-600</code></h4>
992
+ <pre class="f-3 highlighted-code"><span class="token selector">.orange-600</span> <span class="token punctuation">{</span>
993
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
994
+ <span class="token punctuation">}</span></pre>
995
+ </div>
996
+ <div class="ml-3">
997
+ <p class="p">
998
+ <p>Orange at weight 600 ().</p>
999
+
1000
+ </p>
1001
+
1002
+
1003
+ <h5 class="f-2 ttu">
1004
+
1005
+ Example
1006
+
1007
+ </h5>
1008
+
1009
+
1010
+ <div class="mv-3 example">
1011
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1012
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1013
+ .orange-600
1014
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1015
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1016
+ <div class="example-demonstration">
1017
+
1018
+ <div class="bg-black pa-2">
1019
+ <code class="orange-600">
1020
+ .orange-600
1021
+ </code>
1022
+ </div>
1023
+
1024
+ </div>
1025
+ </div>
1026
+
1027
+
1028
+ </div>
1029
+
1030
+ <div class="mt-4 flex gap-3 items-center justify-between" id="orange-700">
1031
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-700</code></h4>
1032
+ <pre class="f-3 highlighted-code"><span class="token selector">.orange-700</span> <span class="token punctuation">{</span>
1033
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
1034
+ <span class="token punctuation">}</span></pre>
1035
+ </div>
1036
+ <div class="ml-3">
1037
+ <p class="p">
1038
+ <p>Orange at weight 700 ().</p>
1039
+
1040
+ </p>
1041
+
1042
+
1043
+ <h5 class="f-2 ttu">
1044
+
1045
+ Example
1046
+
1047
+ </h5>
1048
+
1049
+
1050
+ <div class="mv-3 example">
1051
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1052
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-700<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1053
+ .orange-700
1054
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1055
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1056
+ <div class="example-demonstration">
1057
+
1058
+ <div class="bg-black pa-2">
1059
+ <code class="orange-700">
1060
+ .orange-700
1061
+ </code>
1062
+ </div>
1063
+
1064
+ </div>
1065
+ </div>
1066
+
1067
+
1068
+ </div>
1069
+
1070
+ <div class="mt-4 flex gap-3 items-center justify-between" id="orange-800">
1071
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-800</code></h4>
1072
+ <pre class="f-3 highlighted-code"><span class="token selector">.orange-800</span> <span class="token punctuation">{</span>
1073
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
1074
+ <span class="token punctuation">}</span></pre>
1075
+ </div>
1076
+ <div class="ml-3">
1077
+ <p class="p">
1078
+ <p>Orange at weight 800 (second lightest).</p>
1079
+
1080
+ </p>
1081
+
1082
+
1083
+ <h5 class="f-2 ttu">
1084
+
1085
+ Example
1086
+
1087
+ </h5>
1088
+
1089
+
1090
+ <div class="mv-3 example">
1091
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1092
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1093
+ .orange-800
1094
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1095
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1096
+ <div class="example-demonstration">
1097
+
1098
+ <div class="bg-black pa-2">
1099
+ <code class="orange-800">
1100
+ .orange-800
1101
+ </code>
1102
+ </div>
1103
+
1104
+ </div>
1105
+ </div>
1106
+
1107
+
1108
+ </div>
1109
+
1110
+ <div class="mt-4 flex gap-3 items-center justify-between" id="orange-900">
1111
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.orange-900</code></h4>
1112
+ <pre class="f-3 highlighted-code"><span class="token selector">.orange-900</span> <span class="token punctuation">{</span>
1113
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
1114
+ <span class="token punctuation">}</span></pre>
1115
+ </div>
1116
+ <div class="ml-3">
1117
+ <p class="p">
1118
+ <p>Orange at weight 900 (lightest).</p>
1119
+
1120
+ </p>
1121
+
1122
+
1123
+ <h5 class="f-2 ttu">
1124
+
1125
+ Example
1126
+
1127
+ </h5>
1128
+
1129
+
1130
+ <div class="mv-3 example">
1131
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1132
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>orange-900<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1133
+ .orange-900
1134
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1135
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1136
+ <div class="example-demonstration">
1137
+
1138
+ <div class="bg-black pa-2">
1139
+ <code class="orange-900">
1140
+ .orange-900
1141
+ </code>
1142
+ </div>
1143
+
1144
+ </div>
1145
+ </div>
1146
+
1147
+
1148
+ </div>
1149
+
1150
+
1151
+ <h3 class="f-5 mt-4" id="class-scale:foreground-yellow">Yellow</h3>
1152
+ <p class="p">
1153
+ <p>Yellow shades.</p>
1154
+
1155
+ </p>
1156
+
1157
+ <h4 class="f-2 b">See Also</h3>
1158
+ <ul class="see-also">
1159
+
1160
+ <li><p><a href="/brut-css/properties/colors.html#property-scale:yellow">Yellow</a></p>
1161
+ </li>
1162
+
1163
+ </ul>
1164
+
1165
+
1166
+ <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-100">
1167
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-100</code></h4>
1168
+ <pre class="f-3 highlighted-code"><span class="token selector">.yellow-100</span> <span class="token punctuation">{</span>
1169
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
1170
+ <span class="token punctuation">}</span></pre>
1171
+ </div>
1172
+ <div class="ml-3">
1173
+ <p class="p">
1174
+ <p>Yellow at weight 100 (darkest).</p>
1175
+
1176
+ </p>
1177
+
1178
+
1179
+ <h5 class="f-2 ttu">
1180
+
1181
+ Example
1182
+
1183
+ </h5>
1184
+
1185
+
1186
+ <div class="mv-3 example">
1187
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1188
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1189
+ .yellow-100
1190
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1191
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1192
+ <div class="example-demonstration">
1193
+
1194
+ <div class="bg-white pa-2">
1195
+ <code class="yellow-100">
1196
+ .yellow-100
1197
+ </code>
1198
+ </div>
1199
+
1200
+ </div>
1201
+ </div>
1202
+
1203
+
1204
+ </div>
1205
+
1206
+ <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-200">
1207
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-200</code></h4>
1208
+ <pre class="f-3 highlighted-code"><span class="token selector">.yellow-200</span> <span class="token punctuation">{</span>
1209
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
1210
+ <span class="token punctuation">}</span></pre>
1211
+ </div>
1212
+ <div class="ml-3">
1213
+ <p class="p">
1214
+ <p>Yellow at weight 200 (second darkest).</p>
1215
+
1216
+ </p>
1217
+
1218
+
1219
+ <h5 class="f-2 ttu">
1220
+
1221
+ Example
1222
+
1223
+ </h5>
1224
+
1225
+
1226
+ <div class="mv-3 example">
1227
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1228
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1229
+ .yellow-200
1230
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1231
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1232
+ <div class="example-demonstration">
1233
+
1234
+ <div class="bg-white pa-2">
1235
+ <code class="yellow-200">
1236
+ .yellow-200
1237
+ </code>
1238
+ </div>
1239
+
1240
+ </div>
1241
+ </div>
1242
+
1243
+
1244
+ </div>
1245
+
1246
+ <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-300">
1247
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-300</code></h4>
1248
+ <pre class="f-3 highlighted-code"><span class="token selector">.yellow-300</span> <span class="token punctuation">{</span>
1249
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
1250
+ <span class="token punctuation">}</span></pre>
1251
+ </div>
1252
+ <div class="ml-3">
1253
+ <p class="p">
1254
+ <p>Yellow at weight 300.</p>
1255
+
1256
+ </p>
1257
+
1258
+
1259
+ <h5 class="f-2 ttu">
1260
+
1261
+ Example
1262
+
1263
+ </h5>
1264
+
1265
+
1266
+ <div class="mv-3 example">
1267
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1268
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1269
+ .yellow-300
1270
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1271
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1272
+ <div class="example-demonstration">
1273
+
1274
+ <div class="bg-white pa-2">
1275
+ <code class="yellow-300">
1276
+ .yellow-300
1277
+ </code>
1278
+ </div>
1279
+
1280
+ </div>
1281
+ </div>
1282
+
1283
+
1284
+ </div>
1285
+
1286
+ <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-400">
1287
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-400</code></h4>
1288
+ <pre class="f-3 highlighted-code"><span class="token selector">.yellow-400</span> <span class="token punctuation">{</span>
1289
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
1290
+ <span class="token punctuation">}</span></pre>
1291
+ </div>
1292
+ <div class="ml-3">
1293
+ <p class="p">
1294
+ <p>Yellow at weight 400.</p>
1295
+
1296
+ </p>
1297
+
1298
+
1299
+ <h5 class="f-2 ttu">
1300
+
1301
+ Example
1302
+
1303
+ </h5>
1304
+
1305
+
1306
+ <div class="mv-3 example">
1307
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1308
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1309
+ .yellow-400
1310
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1311
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1312
+ <div class="example-demonstration">
1313
+
1314
+ <div class="bg-white pa-2">
1315
+ <code class="yellow-400">
1316
+ .yellow-400
1317
+ </code>
1318
+ </div>
1319
+
1320
+ </div>
1321
+ </div>
1322
+
1323
+
1324
+ </div>
1325
+
1326
+ <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-500">
1327
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-500</code></h4>
1328
+ <pre class="f-3 highlighted-code"><span class="token selector">.yellow-500</span> <span class="token punctuation">{</span>
1329
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
1330
+ <span class="token punctuation">}</span></pre>
1331
+ </div>
1332
+ <div class="ml-3">
1333
+ <p class="p">
1334
+ <p>Yellow at weight 500.</p>
1335
+
1336
+ </p>
1337
+
1338
+
1339
+ <h5 class="f-2 ttu">
1340
+
1341
+ Example
1342
+
1343
+ </h5>
1344
+
1345
+
1346
+ <div class="mv-3 example">
1347
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1348
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1349
+ .yellow-500
1350
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1351
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1352
+ <div class="example-demonstration">
1353
+
1354
+ <div class="bg-black pa-2">
1355
+ <code class="yellow-500">
1356
+ .yellow-500
1357
+ </code>
1358
+ </div>
1359
+
1360
+ </div>
1361
+ </div>
1362
+
1363
+
1364
+ </div>
1365
+
1366
+ <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-600">
1367
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-600</code></h4>
1368
+ <pre class="f-3 highlighted-code"><span class="token selector">.yellow-600</span> <span class="token punctuation">{</span>
1369
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
1370
+ <span class="token punctuation">}</span></pre>
1371
+ </div>
1372
+ <div class="ml-3">
1373
+ <p class="p">
1374
+ <p>Yellow at weight 600 ().</p>
1375
+
1376
+ </p>
1377
+
1378
+
1379
+ <h5 class="f-2 ttu">
1380
+
1381
+ Example
1382
+
1383
+ </h5>
1384
+
1385
+
1386
+ <div class="mv-3 example">
1387
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1388
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1389
+ .yellow-600
1390
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1391
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1392
+ <div class="example-demonstration">
1393
+
1394
+ <div class="bg-black pa-2">
1395
+ <code class="yellow-600">
1396
+ .yellow-600
1397
+ </code>
1398
+ </div>
1399
+
1400
+ </div>
1401
+ </div>
1402
+
1403
+
1404
+ </div>
1405
+
1406
+ <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-700">
1407
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-700</code></h4>
1408
+ <pre class="f-3 highlighted-code"><span class="token selector">.yellow-700</span> <span class="token punctuation">{</span>
1409
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
1410
+ <span class="token punctuation">}</span></pre>
1411
+ </div>
1412
+ <div class="ml-3">
1413
+ <p class="p">
1414
+ <p>Yellow at weight 700 ().</p>
1415
+
1416
+ </p>
1417
+
1418
+
1419
+ <h5 class="f-2 ttu">
1420
+
1421
+ Example
1422
+
1423
+ </h5>
1424
+
1425
+
1426
+ <div class="mv-3 example">
1427
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1428
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-700<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1429
+ .yellow-700
1430
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1431
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1432
+ <div class="example-demonstration">
1433
+
1434
+ <div class="bg-black pa-2">
1435
+ <code class="yellow-700">
1436
+ .yellow-700
1437
+ </code>
1438
+ </div>
1439
+
1440
+ </div>
1441
+ </div>
1442
+
1443
+
1444
+ </div>
1445
+
1446
+ <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-800">
1447
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-800</code></h4>
1448
+ <pre class="f-3 highlighted-code"><span class="token selector">.yellow-800</span> <span class="token punctuation">{</span>
1449
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
1450
+ <span class="token punctuation">}</span></pre>
1451
+ </div>
1452
+ <div class="ml-3">
1453
+ <p class="p">
1454
+ <p>Yellow at weight 800 (second lightest).</p>
1455
+
1456
+ </p>
1457
+
1458
+
1459
+ <h5 class="f-2 ttu">
1460
+
1461
+ Example
1462
+
1463
+ </h5>
1464
+
1465
+
1466
+ <div class="mv-3 example">
1467
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1468
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1469
+ .yellow-800
1470
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1471
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1472
+ <div class="example-demonstration">
1473
+
1474
+ <div class="bg-black pa-2">
1475
+ <code class="yellow-800">
1476
+ .yellow-800
1477
+ </code>
1478
+ </div>
1479
+
1480
+ </div>
1481
+ </div>
1482
+
1483
+
1484
+ </div>
1485
+
1486
+ <div class="mt-4 flex gap-3 items-center justify-between" id="yellow-900">
1487
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.yellow-900</code></h4>
1488
+ <pre class="f-3 highlighted-code"><span class="token selector">.yellow-900</span> <span class="token punctuation">{</span>
1489
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
1490
+ <span class="token punctuation">}</span></pre>
1491
+ </div>
1492
+ <div class="ml-3">
1493
+ <p class="p">
1494
+ <p>Yellow at weight 900 (lightest).</p>
1495
+
1496
+ </p>
1497
+
1498
+
1499
+ <h5 class="f-2 ttu">
1500
+
1501
+ Example
1502
+
1503
+ </h5>
1504
+
1505
+
1506
+ <div class="mv-3 example">
1507
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1508
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow-900<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1509
+ .yellow-900
1510
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1511
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1512
+ <div class="example-demonstration">
1513
+
1514
+ <div class="bg-black pa-2">
1515
+ <code class="yellow-900">
1516
+ .yellow-900
1517
+ </code>
1518
+ </div>
1519
+
1520
+ </div>
1521
+ </div>
1522
+
1523
+
1524
+ </div>
1525
+
1526
+
1527
+ <h3 class="f-5 mt-4" id="class-scale:foreground-green">Green</h3>
1528
+ <p class="p">
1529
+ <p>Green shades.</p>
1530
+
1531
+ </p>
1532
+
1533
+ <h4 class="f-2 b">See Also</h3>
1534
+ <ul class="see-also">
1535
+
1536
+ <li><p><a href="/brut-css/properties/colors.html#property-scale:green">Green</a></p>
1537
+ </li>
1538
+
1539
+ </ul>
1540
+
1541
+
1542
+ <div class="mt-4 flex gap-3 items-center justify-between" id="green-100">
1543
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.green-100</code></h4>
1544
+ <pre class="f-3 highlighted-code"><span class="token selector">.green-100</span> <span class="token punctuation">{</span>
1545
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
1546
+ <span class="token punctuation">}</span></pre>
1547
+ </div>
1548
+ <div class="ml-3">
1549
+ <p class="p">
1550
+ <p>Green at weight 100 (darkest).</p>
1551
+
1552
+ </p>
1553
+
1554
+
1555
+ <h5 class="f-2 ttu">
1556
+
1557
+ Example
1558
+
1559
+ </h5>
1560
+
1561
+
1562
+ <div class="mv-3 example">
1563
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1564
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1565
+ .green-100
1566
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1567
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1568
+ <div class="example-demonstration">
1569
+
1570
+ <div class="bg-white pa-2">
1571
+ <code class="green-100">
1572
+ .green-100
1573
+ </code>
1574
+ </div>
1575
+
1576
+ </div>
1577
+ </div>
1578
+
1579
+
1580
+ </div>
1581
+
1582
+ <div class="mt-4 flex gap-3 items-center justify-between" id="green-200">
1583
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.green-200</code></h4>
1584
+ <pre class="f-3 highlighted-code"><span class="token selector">.green-200</span> <span class="token punctuation">{</span>
1585
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
1586
+ <span class="token punctuation">}</span></pre>
1587
+ </div>
1588
+ <div class="ml-3">
1589
+ <p class="p">
1590
+ <p>Green at weight 200 (second darkest).</p>
1591
+
1592
+ </p>
1593
+
1594
+
1595
+ <h5 class="f-2 ttu">
1596
+
1597
+ Example
1598
+
1599
+ </h5>
1600
+
1601
+
1602
+ <div class="mv-3 example">
1603
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1604
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1605
+ .green-200
1606
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1607
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1608
+ <div class="example-demonstration">
1609
+
1610
+ <div class="bg-white pa-2">
1611
+ <code class="green-200">
1612
+ .green-200
1613
+ </code>
1614
+ </div>
1615
+
1616
+ </div>
1617
+ </div>
1618
+
1619
+
1620
+ </div>
1621
+
1622
+ <div class="mt-4 flex gap-3 items-center justify-between" id="green-300">
1623
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.green-300</code></h4>
1624
+ <pre class="f-3 highlighted-code"><span class="token selector">.green-300</span> <span class="token punctuation">{</span>
1625
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
1626
+ <span class="token punctuation">}</span></pre>
1627
+ </div>
1628
+ <div class="ml-3">
1629
+ <p class="p">
1630
+ <p>Green at weight 300.</p>
1631
+
1632
+ </p>
1633
+
1634
+
1635
+ <h5 class="f-2 ttu">
1636
+
1637
+ Example
1638
+
1639
+ </h5>
1640
+
1641
+
1642
+ <div class="mv-3 example">
1643
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1644
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1645
+ .green-300
1646
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1647
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1648
+ <div class="example-demonstration">
1649
+
1650
+ <div class="bg-white pa-2">
1651
+ <code class="green-300">
1652
+ .green-300
1653
+ </code>
1654
+ </div>
1655
+
1656
+ </div>
1657
+ </div>
1658
+
1659
+
1660
+ </div>
1661
+
1662
+ <div class="mt-4 flex gap-3 items-center justify-between" id="green-400">
1663
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.green-400</code></h4>
1664
+ <pre class="f-3 highlighted-code"><span class="token selector">.green-400</span> <span class="token punctuation">{</span>
1665
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
1666
+ <span class="token punctuation">}</span></pre>
1667
+ </div>
1668
+ <div class="ml-3">
1669
+ <p class="p">
1670
+ <p>Green at weight 400.</p>
1671
+
1672
+ </p>
1673
+
1674
+
1675
+ <h5 class="f-2 ttu">
1676
+
1677
+ Example
1678
+
1679
+ </h5>
1680
+
1681
+
1682
+ <div class="mv-3 example">
1683
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1684
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1685
+ .green-400
1686
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1687
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1688
+ <div class="example-demonstration">
1689
+
1690
+ <div class="bg-white pa-2">
1691
+ <code class="green-400">
1692
+ .green-400
1693
+ </code>
1694
+ </div>
1695
+
1696
+ </div>
1697
+ </div>
1698
+
1699
+
1700
+ </div>
1701
+
1702
+ <div class="mt-4 flex gap-3 items-center justify-between" id="green-500">
1703
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.green-500</code></h4>
1704
+ <pre class="f-3 highlighted-code"><span class="token selector">.green-500</span> <span class="token punctuation">{</span>
1705
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
1706
+ <span class="token punctuation">}</span></pre>
1707
+ </div>
1708
+ <div class="ml-3">
1709
+ <p class="p">
1710
+ <p>Green at weight 500.</p>
1711
+
1712
+ </p>
1713
+
1714
+
1715
+ <h5 class="f-2 ttu">
1716
+
1717
+ Example
1718
+
1719
+ </h5>
1720
+
1721
+
1722
+ <div class="mv-3 example">
1723
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1724
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1725
+ .green-500
1726
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1727
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1728
+ <div class="example-demonstration">
1729
+
1730
+ <div class="bg-black pa-2">
1731
+ <code class="green-500">
1732
+ .green-500
1733
+ </code>
1734
+ </div>
1735
+
1736
+ </div>
1737
+ </div>
1738
+
1739
+
1740
+ </div>
1741
+
1742
+ <div class="mt-4 flex gap-3 items-center justify-between" id="green-600">
1743
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.green-600</code></h4>
1744
+ <pre class="f-3 highlighted-code"><span class="token selector">.green-600</span> <span class="token punctuation">{</span>
1745
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
1746
+ <span class="token punctuation">}</span></pre>
1747
+ </div>
1748
+ <div class="ml-3">
1749
+ <p class="p">
1750
+ <p>Green at weight 600 ().</p>
1751
+
1752
+ </p>
1753
+
1754
+
1755
+ <h5 class="f-2 ttu">
1756
+
1757
+ Example
1758
+
1759
+ </h5>
1760
+
1761
+
1762
+ <div class="mv-3 example">
1763
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1764
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1765
+ .green-600
1766
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1767
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1768
+ <div class="example-demonstration">
1769
+
1770
+ <div class="bg-black pa-2">
1771
+ <code class="green-600">
1772
+ .green-600
1773
+ </code>
1774
+ </div>
1775
+
1776
+ </div>
1777
+ </div>
1778
+
1779
+
1780
+ </div>
1781
+
1782
+ <div class="mt-4 flex gap-3 items-center justify-between" id="green-700">
1783
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.green-700</code></h4>
1784
+ <pre class="f-3 highlighted-code"><span class="token selector">.green-700</span> <span class="token punctuation">{</span>
1785
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
1786
+ <span class="token punctuation">}</span></pre>
1787
+ </div>
1788
+ <div class="ml-3">
1789
+ <p class="p">
1790
+ <p>Green at weight 700 ().</p>
1791
+
1792
+ </p>
1793
+
1794
+
1795
+ <h5 class="f-2 ttu">
1796
+
1797
+ Example
1798
+
1799
+ </h5>
1800
+
1801
+
1802
+ <div class="mv-3 example">
1803
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1804
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-700<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1805
+ .green-700
1806
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1807
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1808
+ <div class="example-demonstration">
1809
+
1810
+ <div class="bg-black pa-2">
1811
+ <code class="green-700">
1812
+ .green-700
1813
+ </code>
1814
+ </div>
1815
+
1816
+ </div>
1817
+ </div>
1818
+
1819
+
1820
+ </div>
1821
+
1822
+ <div class="mt-4 flex gap-3 items-center justify-between" id="green-800">
1823
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.green-800</code></h4>
1824
+ <pre class="f-3 highlighted-code"><span class="token selector">.green-800</span> <span class="token punctuation">{</span>
1825
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
1826
+ <span class="token punctuation">}</span></pre>
1827
+ </div>
1828
+ <div class="ml-3">
1829
+ <p class="p">
1830
+ <p>Green at weight 800 (second lightest).</p>
1831
+
1832
+ </p>
1833
+
1834
+
1835
+ <h5 class="f-2 ttu">
1836
+
1837
+ Example
1838
+
1839
+ </h5>
1840
+
1841
+
1842
+ <div class="mv-3 example">
1843
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1844
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1845
+ .green-800
1846
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1847
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1848
+ <div class="example-demonstration">
1849
+
1850
+ <div class="bg-black pa-2">
1851
+ <code class="green-800">
1852
+ .green-800
1853
+ </code>
1854
+ </div>
1855
+
1856
+ </div>
1857
+ </div>
1858
+
1859
+
1860
+ </div>
1861
+
1862
+ <div class="mt-4 flex gap-3 items-center justify-between" id="green-900">
1863
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.green-900</code></h4>
1864
+ <pre class="f-3 highlighted-code"><span class="token selector">.green-900</span> <span class="token punctuation">{</span>
1865
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
1866
+ <span class="token punctuation">}</span></pre>
1867
+ </div>
1868
+ <div class="ml-3">
1869
+ <p class="p">
1870
+ <p>Green at weight 900 (lightest).</p>
1871
+
1872
+ </p>
1873
+
1874
+
1875
+ <h5 class="f-2 ttu">
1876
+
1877
+ Example
1878
+
1879
+ </h5>
1880
+
1881
+
1882
+ <div class="mv-3 example">
1883
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1884
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>green-900<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1885
+ .green-900
1886
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1887
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1888
+ <div class="example-demonstration">
1889
+
1890
+ <div class="bg-black pa-2">
1891
+ <code class="green-900">
1892
+ .green-900
1893
+ </code>
1894
+ </div>
1895
+
1896
+ </div>
1897
+ </div>
1898
+
1899
+
1900
+ </div>
1901
+
1902
+
1903
+ <h3 class="f-5 mt-4" id="class-scale:foreground-blue">Blue</h3>
1904
+ <p class="p">
1905
+ <p>Blue shades.</p>
1906
+
1907
+ </p>
1908
+
1909
+ <h4 class="f-2 b">See Also</h3>
1910
+ <ul class="see-also">
1911
+
1912
+ <li><p><a href="/brut-css/properties/colors.html#property-scale:blue">Blue</a></p>
1913
+ </li>
1914
+
1915
+ </ul>
1916
+
1917
+
1918
+ <div class="mt-4 flex gap-3 items-center justify-between" id="blue-100">
1919
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-100</code></h4>
1920
+ <pre class="f-3 highlighted-code"><span class="token selector">.blue-100</span> <span class="token punctuation">{</span>
1921
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
1922
+ <span class="token punctuation">}</span></pre>
1923
+ </div>
1924
+ <div class="ml-3">
1925
+ <p class="p">
1926
+ <p>Blue at weight 100 (darkest).</p>
1927
+
1928
+ </p>
1929
+
1930
+
1931
+ <h5 class="f-2 ttu">
1932
+
1933
+ Example
1934
+
1935
+ </h5>
1936
+
1937
+
1938
+ <div class="mv-3 example">
1939
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1940
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1941
+ .blue-100
1942
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1943
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1944
+ <div class="example-demonstration">
1945
+
1946
+ <div class="bg-white pa-2">
1947
+ <code class="blue-100">
1948
+ .blue-100
1949
+ </code>
1950
+ </div>
1951
+
1952
+ </div>
1953
+ </div>
1954
+
1955
+
1956
+ </div>
1957
+
1958
+ <div class="mt-4 flex gap-3 items-center justify-between" id="blue-200">
1959
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-200</code></h4>
1960
+ <pre class="f-3 highlighted-code"><span class="token selector">.blue-200</span> <span class="token punctuation">{</span>
1961
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
1962
+ <span class="token punctuation">}</span></pre>
1963
+ </div>
1964
+ <div class="ml-3">
1965
+ <p class="p">
1966
+ <p>Blue at weight 200 (second darkest).</p>
1967
+
1968
+ </p>
1969
+
1970
+
1971
+ <h5 class="f-2 ttu">
1972
+
1973
+ Example
1974
+
1975
+ </h5>
1976
+
1977
+
1978
+ <div class="mv-3 example">
1979
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1980
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
1981
+ .blue-200
1982
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
1983
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
1984
+ <div class="example-demonstration">
1985
+
1986
+ <div class="bg-white pa-2">
1987
+ <code class="blue-200">
1988
+ .blue-200
1989
+ </code>
1990
+ </div>
1991
+
1992
+ </div>
1993
+ </div>
1994
+
1995
+
1996
+ </div>
1997
+
1998
+ <div class="mt-4 flex gap-3 items-center justify-between" id="blue-300">
1999
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-300</code></h4>
2000
+ <pre class="f-3 highlighted-code"><span class="token selector">.blue-300</span> <span class="token punctuation">{</span>
2001
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
2002
+ <span class="token punctuation">}</span></pre>
2003
+ </div>
2004
+ <div class="ml-3">
2005
+ <p class="p">
2006
+ <p>Blue at weight 300.</p>
2007
+
2008
+ </p>
2009
+
2010
+
2011
+ <h5 class="f-2 ttu">
2012
+
2013
+ Example
2014
+
2015
+ </h5>
2016
+
2017
+
2018
+ <div class="mv-3 example">
2019
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2020
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2021
+ .blue-300
2022
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2023
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2024
+ <div class="example-demonstration">
2025
+
2026
+ <div class="bg-white pa-2">
2027
+ <code class="blue-300">
2028
+ .blue-300
2029
+ </code>
2030
+ </div>
2031
+
2032
+ </div>
2033
+ </div>
2034
+
2035
+
2036
+ </div>
2037
+
2038
+ <div class="mt-4 flex gap-3 items-center justify-between" id="blue-400">
2039
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-400</code></h4>
2040
+ <pre class="f-3 highlighted-code"><span class="token selector">.blue-400</span> <span class="token punctuation">{</span>
2041
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
2042
+ <span class="token punctuation">}</span></pre>
2043
+ </div>
2044
+ <div class="ml-3">
2045
+ <p class="p">
2046
+ <p>Blue at weight 400.</p>
2047
+
2048
+ </p>
2049
+
2050
+
2051
+ <h5 class="f-2 ttu">
2052
+
2053
+ Example
2054
+
2055
+ </h5>
2056
+
2057
+
2058
+ <div class="mv-3 example">
2059
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2060
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2061
+ .blue-400
2062
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2063
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2064
+ <div class="example-demonstration">
2065
+
2066
+ <div class="bg-white pa-2">
2067
+ <code class="blue-400">
2068
+ .blue-400
2069
+ </code>
2070
+ </div>
2071
+
2072
+ </div>
2073
+ </div>
2074
+
2075
+
2076
+ </div>
2077
+
2078
+ <div class="mt-4 flex gap-3 items-center justify-between" id="blue-500">
2079
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-500</code></h4>
2080
+ <pre class="f-3 highlighted-code"><span class="token selector">.blue-500</span> <span class="token punctuation">{</span>
2081
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
2082
+ <span class="token punctuation">}</span></pre>
2083
+ </div>
2084
+ <div class="ml-3">
2085
+ <p class="p">
2086
+ <p>Blue at weight 500.</p>
2087
+
2088
+ </p>
2089
+
2090
+
2091
+ <h5 class="f-2 ttu">
2092
+
2093
+ Example
2094
+
2095
+ </h5>
2096
+
2097
+
2098
+ <div class="mv-3 example">
2099
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2100
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2101
+ .blue-500
2102
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2103
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2104
+ <div class="example-demonstration">
2105
+
2106
+ <div class="bg-black pa-2">
2107
+ <code class="blue-500">
2108
+ .blue-500
2109
+ </code>
2110
+ </div>
2111
+
2112
+ </div>
2113
+ </div>
2114
+
2115
+
2116
+ </div>
2117
+
2118
+ <div class="mt-4 flex gap-3 items-center justify-between" id="blue-600">
2119
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-600</code></h4>
2120
+ <pre class="f-3 highlighted-code"><span class="token selector">.blue-600</span> <span class="token punctuation">{</span>
2121
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
2122
+ <span class="token punctuation">}</span></pre>
2123
+ </div>
2124
+ <div class="ml-3">
2125
+ <p class="p">
2126
+ <p>Blue at weight 600 ().</p>
2127
+
2128
+ </p>
2129
+
2130
+
2131
+ <h5 class="f-2 ttu">
2132
+
2133
+ Example
2134
+
2135
+ </h5>
2136
+
2137
+
2138
+ <div class="mv-3 example">
2139
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2140
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2141
+ .blue-600
2142
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2143
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2144
+ <div class="example-demonstration">
2145
+
2146
+ <div class="bg-black pa-2">
2147
+ <code class="blue-600">
2148
+ .blue-600
2149
+ </code>
2150
+ </div>
2151
+
2152
+ </div>
2153
+ </div>
2154
+
2155
+
2156
+ </div>
2157
+
2158
+ <div class="mt-4 flex gap-3 items-center justify-between" id="blue-700">
2159
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-700</code></h4>
2160
+ <pre class="f-3 highlighted-code"><span class="token selector">.blue-700</span> <span class="token punctuation">{</span>
2161
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
2162
+ <span class="token punctuation">}</span></pre>
2163
+ </div>
2164
+ <div class="ml-3">
2165
+ <p class="p">
2166
+ <p>Blue at weight 700 ().</p>
2167
+
2168
+ </p>
2169
+
2170
+
2171
+ <h5 class="f-2 ttu">
2172
+
2173
+ Example
2174
+
2175
+ </h5>
2176
+
2177
+
2178
+ <div class="mv-3 example">
2179
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2180
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-700<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2181
+ .blue-700
2182
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2183
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2184
+ <div class="example-demonstration">
2185
+
2186
+ <div class="bg-black pa-2">
2187
+ <code class="blue-700">
2188
+ .blue-700
2189
+ </code>
2190
+ </div>
2191
+
2192
+ </div>
2193
+ </div>
2194
+
2195
+
2196
+ </div>
2197
+
2198
+ <div class="mt-4 flex gap-3 items-center justify-between" id="blue-800">
2199
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-800</code></h4>
2200
+ <pre class="f-3 highlighted-code"><span class="token selector">.blue-800</span> <span class="token punctuation">{</span>
2201
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
2202
+ <span class="token punctuation">}</span></pre>
2203
+ </div>
2204
+ <div class="ml-3">
2205
+ <p class="p">
2206
+ <p>Blue at weight 800 (second lightest).</p>
2207
+
2208
+ </p>
2209
+
2210
+
2211
+ <h5 class="f-2 ttu">
2212
+
2213
+ Example
2214
+
2215
+ </h5>
2216
+
2217
+
2218
+ <div class="mv-3 example">
2219
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2220
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2221
+ .blue-800
2222
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2223
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2224
+ <div class="example-demonstration">
2225
+
2226
+ <div class="bg-black pa-2">
2227
+ <code class="blue-800">
2228
+ .blue-800
2229
+ </code>
2230
+ </div>
2231
+
2232
+ </div>
2233
+ </div>
2234
+
2235
+
2236
+ </div>
2237
+
2238
+ <div class="mt-4 flex gap-3 items-center justify-between" id="blue-900">
2239
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.blue-900</code></h4>
2240
+ <pre class="f-3 highlighted-code"><span class="token selector">.blue-900</span> <span class="token punctuation">{</span>
2241
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
2242
+ <span class="token punctuation">}</span></pre>
2243
+ </div>
2244
+ <div class="ml-3">
2245
+ <p class="p">
2246
+ <p>Blue at weight 900 (lightest).</p>
2247
+
2248
+ </p>
2249
+
2250
+
2251
+ <h5 class="f-2 ttu">
2252
+
2253
+ Example
2254
+
2255
+ </h5>
2256
+
2257
+
2258
+ <div class="mv-3 example">
2259
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2260
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue-900<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2261
+ .blue-900
2262
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2263
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2264
+ <div class="example-demonstration">
2265
+
2266
+ <div class="bg-black pa-2">
2267
+ <code class="blue-900">
2268
+ .blue-900
2269
+ </code>
2270
+ </div>
2271
+
2272
+ </div>
2273
+ </div>
2274
+
2275
+
2276
+ </div>
2277
+
2278
+
2279
+ <h3 class="f-5 mt-4" id="class-scale:foreground-purple">Purple</h3>
2280
+ <p class="p">
2281
+ <p>Purple shades.</p>
2282
+
2283
+ </p>
2284
+
2285
+ <h4 class="f-2 b">See Also</h3>
2286
+ <ul class="see-also">
2287
+
2288
+ <li><p><a href="/brut-css/properties/colors.html#property-scale:purple">Purple</a></p>
2289
+ </li>
2290
+
2291
+ </ul>
2292
+
2293
+
2294
+ <div class="mt-4 flex gap-3 items-center justify-between" id="purple-100">
2295
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-100</code></h4>
2296
+ <pre class="f-3 highlighted-code"><span class="token selector">.purple-100</span> <span class="token punctuation">{</span>
2297
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
2298
+ <span class="token punctuation">}</span></pre>
2299
+ </div>
2300
+ <div class="ml-3">
2301
+ <p class="p">
2302
+ <p>Purple at weight 100 (darkest).</p>
2303
+
2304
+ </p>
2305
+
2306
+
2307
+ <h5 class="f-2 ttu">
2308
+
2309
+ Example
2310
+
2311
+ </h5>
2312
+
2313
+
2314
+ <div class="mv-3 example">
2315
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2316
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2317
+ .purple-100
2318
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2319
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2320
+ <div class="example-demonstration">
2321
+
2322
+ <div class="bg-white pa-2">
2323
+ <code class="purple-100">
2324
+ .purple-100
2325
+ </code>
2326
+ </div>
2327
+
2328
+ </div>
2329
+ </div>
2330
+
2331
+
2332
+ </div>
2333
+
2334
+ <div class="mt-4 flex gap-3 items-center justify-between" id="purple-200">
2335
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-200</code></h4>
2336
+ <pre class="f-3 highlighted-code"><span class="token selector">.purple-200</span> <span class="token punctuation">{</span>
2337
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
2338
+ <span class="token punctuation">}</span></pre>
2339
+ </div>
2340
+ <div class="ml-3">
2341
+ <p class="p">
2342
+ <p>Purple at weight 200 (second darkest).</p>
2343
+
2344
+ </p>
2345
+
2346
+
2347
+ <h5 class="f-2 ttu">
2348
+
2349
+ Example
2350
+
2351
+ </h5>
2352
+
2353
+
2354
+ <div class="mv-3 example">
2355
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2356
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2357
+ .purple-200
2358
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2359
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2360
+ <div class="example-demonstration">
2361
+
2362
+ <div class="bg-white pa-2">
2363
+ <code class="purple-200">
2364
+ .purple-200
2365
+ </code>
2366
+ </div>
2367
+
2368
+ </div>
2369
+ </div>
2370
+
2371
+
2372
+ </div>
2373
+
2374
+ <div class="mt-4 flex gap-3 items-center justify-between" id="purple-300">
2375
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-300</code></h4>
2376
+ <pre class="f-3 highlighted-code"><span class="token selector">.purple-300</span> <span class="token punctuation">{</span>
2377
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
2378
+ <span class="token punctuation">}</span></pre>
2379
+ </div>
2380
+ <div class="ml-3">
2381
+ <p class="p">
2382
+ <p>Purple at weight 300.</p>
2383
+
2384
+ </p>
2385
+
2386
+
2387
+ <h5 class="f-2 ttu">
2388
+
2389
+ Example
2390
+
2391
+ </h5>
2392
+
2393
+
2394
+ <div class="mv-3 example">
2395
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2396
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2397
+ .purple-300
2398
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2399
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2400
+ <div class="example-demonstration">
2401
+
2402
+ <div class="bg-white pa-2">
2403
+ <code class="purple-300">
2404
+ .purple-300
2405
+ </code>
2406
+ </div>
2407
+
2408
+ </div>
2409
+ </div>
2410
+
2411
+
2412
+ </div>
2413
+
2414
+ <div class="mt-4 flex gap-3 items-center justify-between" id="purple-400">
2415
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-400</code></h4>
2416
+ <pre class="f-3 highlighted-code"><span class="token selector">.purple-400</span> <span class="token punctuation">{</span>
2417
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
2418
+ <span class="token punctuation">}</span></pre>
2419
+ </div>
2420
+ <div class="ml-3">
2421
+ <p class="p">
2422
+ <p>Purple at weight 400.</p>
2423
+
2424
+ </p>
2425
+
2426
+
2427
+ <h5 class="f-2 ttu">
2428
+
2429
+ Example
2430
+
2431
+ </h5>
2432
+
2433
+
2434
+ <div class="mv-3 example">
2435
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2436
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2437
+ .purple-400
2438
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2439
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2440
+ <div class="example-demonstration">
2441
+
2442
+ <div class="bg-white pa-2">
2443
+ <code class="purple-400">
2444
+ .purple-400
2445
+ </code>
2446
+ </div>
2447
+
2448
+ </div>
2449
+ </div>
2450
+
2451
+
2452
+ </div>
2453
+
2454
+ <div class="mt-4 flex gap-3 items-center justify-between" id="purple-500">
2455
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-500</code></h4>
2456
+ <pre class="f-3 highlighted-code"><span class="token selector">.purple-500</span> <span class="token punctuation">{</span>
2457
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
2458
+ <span class="token punctuation">}</span></pre>
2459
+ </div>
2460
+ <div class="ml-3">
2461
+ <p class="p">
2462
+ <p>Purple at weight 500.</p>
2463
+
2464
+ </p>
2465
+
2466
+
2467
+ <h5 class="f-2 ttu">
2468
+
2469
+ Example
2470
+
2471
+ </h5>
2472
+
2473
+
2474
+ <div class="mv-3 example">
2475
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2476
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2477
+ .purple-500
2478
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2479
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2480
+ <div class="example-demonstration">
2481
+
2482
+ <div class="bg-black pa-2">
2483
+ <code class="purple-500">
2484
+ .purple-500
2485
+ </code>
2486
+ </div>
2487
+
2488
+ </div>
2489
+ </div>
2490
+
2491
+
2492
+ </div>
2493
+
2494
+ <div class="mt-4 flex gap-3 items-center justify-between" id="purple-600">
2495
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-600</code></h4>
2496
+ <pre class="f-3 highlighted-code"><span class="token selector">.purple-600</span> <span class="token punctuation">{</span>
2497
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
2498
+ <span class="token punctuation">}</span></pre>
2499
+ </div>
2500
+ <div class="ml-3">
2501
+ <p class="p">
2502
+ <p>Purple at weight 600 ().</p>
2503
+
2504
+ </p>
2505
+
2506
+
2507
+ <h5 class="f-2 ttu">
2508
+
2509
+ Example
2510
+
2511
+ </h5>
2512
+
2513
+
2514
+ <div class="mv-3 example">
2515
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2516
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2517
+ .purple-600
2518
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2519
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2520
+ <div class="example-demonstration">
2521
+
2522
+ <div class="bg-black pa-2">
2523
+ <code class="purple-600">
2524
+ .purple-600
2525
+ </code>
2526
+ </div>
2527
+
2528
+ </div>
2529
+ </div>
2530
+
2531
+
2532
+ </div>
2533
+
2534
+ <div class="mt-4 flex gap-3 items-center justify-between" id="purple-700">
2535
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-700</code></h4>
2536
+ <pre class="f-3 highlighted-code"><span class="token selector">.purple-700</span> <span class="token punctuation">{</span>
2537
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
2538
+ <span class="token punctuation">}</span></pre>
2539
+ </div>
2540
+ <div class="ml-3">
2541
+ <p class="p">
2542
+ <p>Purple at weight 700 ().</p>
2543
+
2544
+ </p>
2545
+
2546
+
2547
+ <h5 class="f-2 ttu">
2548
+
2549
+ Example
2550
+
2551
+ </h5>
2552
+
2553
+
2554
+ <div class="mv-3 example">
2555
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2556
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-700<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2557
+ .purple-700
2558
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2559
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2560
+ <div class="example-demonstration">
2561
+
2562
+ <div class="bg-black pa-2">
2563
+ <code class="purple-700">
2564
+ .purple-700
2565
+ </code>
2566
+ </div>
2567
+
2568
+ </div>
2569
+ </div>
2570
+
2571
+
2572
+ </div>
2573
+
2574
+ <div class="mt-4 flex gap-3 items-center justify-between" id="purple-800">
2575
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-800</code></h4>
2576
+ <pre class="f-3 highlighted-code"><span class="token selector">.purple-800</span> <span class="token punctuation">{</span>
2577
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
2578
+ <span class="token punctuation">}</span></pre>
2579
+ </div>
2580
+ <div class="ml-3">
2581
+ <p class="p">
2582
+ <p>Purple at weight 800 (second lightest).</p>
2583
+
2584
+ </p>
2585
+
2586
+
2587
+ <h5 class="f-2 ttu">
2588
+
2589
+ Example
2590
+
2591
+ </h5>
2592
+
2593
+
2594
+ <div class="mv-3 example">
2595
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2596
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2597
+ .purple-800
2598
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2599
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2600
+ <div class="example-demonstration">
2601
+
2602
+ <div class="bg-black pa-2">
2603
+ <code class="purple-800">
2604
+ .purple-800
2605
+ </code>
2606
+ </div>
2607
+
2608
+ </div>
2609
+ </div>
2610
+
2611
+
2612
+ </div>
2613
+
2614
+ <div class="mt-4 flex gap-3 items-center justify-between" id="purple-900">
2615
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.purple-900</code></h4>
2616
+ <pre class="f-3 highlighted-code"><span class="token selector">.purple-900</span> <span class="token punctuation">{</span>
2617
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
2618
+ <span class="token punctuation">}</span></pre>
2619
+ </div>
2620
+ <div class="ml-3">
2621
+ <p class="p">
2622
+ <p>Purple at weight 900 (lightest).</p>
2623
+
2624
+ </p>
2625
+
2626
+
2627
+ <h5 class="f-2 ttu">
2628
+
2629
+ Example
2630
+
2631
+ </h5>
2632
+
2633
+
2634
+ <div class="mv-3 example">
2635
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2636
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple-900<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2637
+ .purple-900
2638
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2639
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2640
+ <div class="example-demonstration">
2641
+
2642
+ <div class="bg-black pa-2">
2643
+ <code class="purple-900">
2644
+ .purple-900
2645
+ </code>
2646
+ </div>
2647
+
2648
+ </div>
2649
+ </div>
2650
+
2651
+
2652
+ </div>
2653
+
2654
+
2655
+ <h3 class="f-5 mt-4" id="class-scale:foreground-gray">Gray</h3>
2656
+ <p class="p">
2657
+ <p>Gray shades.</p>
2658
+
2659
+ </p>
2660
+
2661
+ <h4 class="f-2 b">See Also</h3>
2662
+ <ul class="see-also">
2663
+
2664
+ <li><p><a href="/brut-css/properties/colors.html#property-scale:gray">Gray</a></p>
2665
+ </li>
2666
+
2667
+ </ul>
2668
+
2669
+
2670
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gray-100">
2671
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-100</code></h4>
2672
+ <pre class="f-3 highlighted-code"><span class="token selector">.gray-100</span> <span class="token punctuation">{</span>
2673
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
2674
+ <span class="token punctuation">}</span></pre>
2675
+ </div>
2676
+ <div class="ml-3">
2677
+ <p class="p">
2678
+ <p>Gray at weight 100 (darkest).</p>
2679
+
2680
+ </p>
2681
+
2682
+
2683
+ <h5 class="f-2 ttu">
2684
+
2685
+ Example
2686
+
2687
+ </h5>
2688
+
2689
+
2690
+ <div class="mv-3 example">
2691
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2692
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2693
+ .gray-100
2694
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2695
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2696
+ <div class="example-demonstration">
2697
+
2698
+ <div class="bg-white pa-2">
2699
+ <code class="gray-100">
2700
+ .gray-100
2701
+ </code>
2702
+ </div>
2703
+
2704
+ </div>
2705
+ </div>
2706
+
2707
+
2708
+ </div>
2709
+
2710
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gray-200">
2711
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-200</code></h4>
2712
+ <pre class="f-3 highlighted-code"><span class="token selector">.gray-200</span> <span class="token punctuation">{</span>
2713
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
2714
+ <span class="token punctuation">}</span></pre>
2715
+ </div>
2716
+ <div class="ml-3">
2717
+ <p class="p">
2718
+ <p>Gray at weight 200 (second darkest).</p>
2719
+
2720
+ </p>
2721
+
2722
+
2723
+ <h5 class="f-2 ttu">
2724
+
2725
+ Example
2726
+
2727
+ </h5>
2728
+
2729
+
2730
+ <div class="mv-3 example">
2731
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2732
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2733
+ .gray-200
2734
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2735
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2736
+ <div class="example-demonstration">
2737
+
2738
+ <div class="bg-white pa-2">
2739
+ <code class="gray-200">
2740
+ .gray-200
2741
+ </code>
2742
+ </div>
2743
+
2744
+ </div>
2745
+ </div>
2746
+
2747
+
2748
+ </div>
2749
+
2750
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gray-300">
2751
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-300</code></h4>
2752
+ <pre class="f-3 highlighted-code"><span class="token selector">.gray-300</span> <span class="token punctuation">{</span>
2753
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
2754
+ <span class="token punctuation">}</span></pre>
2755
+ </div>
2756
+ <div class="ml-3">
2757
+ <p class="p">
2758
+ <p>Gray at weight 300.</p>
2759
+
2760
+ </p>
2761
+
2762
+
2763
+ <h5 class="f-2 ttu">
2764
+
2765
+ Example
2766
+
2767
+ </h5>
2768
+
2769
+
2770
+ <div class="mv-3 example">
2771
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2772
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2773
+ .gray-300
2774
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2775
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2776
+ <div class="example-demonstration">
2777
+
2778
+ <div class="bg-white pa-2">
2779
+ <code class="gray-300">
2780
+ .gray-300
2781
+ </code>
2782
+ </div>
2783
+
2784
+ </div>
2785
+ </div>
2786
+
2787
+
2788
+ </div>
2789
+
2790
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gray-400">
2791
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-400</code></h4>
2792
+ <pre class="f-3 highlighted-code"><span class="token selector">.gray-400</span> <span class="token punctuation">{</span>
2793
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
2794
+ <span class="token punctuation">}</span></pre>
2795
+ </div>
2796
+ <div class="ml-3">
2797
+ <p class="p">
2798
+ <p>Gray at weight 400.</p>
2799
+
2800
+ </p>
2801
+
2802
+
2803
+ <h5 class="f-2 ttu">
2804
+
2805
+ Example
2806
+
2807
+ </h5>
2808
+
2809
+
2810
+ <div class="mv-3 example">
2811
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2812
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2813
+ .gray-400
2814
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2815
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2816
+ <div class="example-demonstration">
2817
+
2818
+ <div class="bg-white pa-2">
2819
+ <code class="gray-400">
2820
+ .gray-400
2821
+ </code>
2822
+ </div>
2823
+
2824
+ </div>
2825
+ </div>
2826
+
2827
+
2828
+ </div>
2829
+
2830
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gray-500">
2831
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-500</code></h4>
2832
+ <pre class="f-3 highlighted-code"><span class="token selector">.gray-500</span> <span class="token punctuation">{</span>
2833
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
2834
+ <span class="token punctuation">}</span></pre>
2835
+ </div>
2836
+ <div class="ml-3">
2837
+ <p class="p">
2838
+ <p>Gray at weight 500.</p>
2839
+
2840
+ </p>
2841
+
2842
+
2843
+ <h5 class="f-2 ttu">
2844
+
2845
+ Example
2846
+
2847
+ </h5>
2848
+
2849
+
2850
+ <div class="mv-3 example">
2851
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2852
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2853
+ .gray-500
2854
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2855
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2856
+ <div class="example-demonstration">
2857
+
2858
+ <div class="bg-black pa-2">
2859
+ <code class="gray-500">
2860
+ .gray-500
2861
+ </code>
2862
+ </div>
2863
+
2864
+ </div>
2865
+ </div>
2866
+
2867
+
2868
+ </div>
2869
+
2870
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gray-600">
2871
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-600</code></h4>
2872
+ <pre class="f-3 highlighted-code"><span class="token selector">.gray-600</span> <span class="token punctuation">{</span>
2873
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
2874
+ <span class="token punctuation">}</span></pre>
2875
+ </div>
2876
+ <div class="ml-3">
2877
+ <p class="p">
2878
+ <p>Gray at weight 600 ().</p>
2879
+
2880
+ </p>
2881
+
2882
+
2883
+ <h5 class="f-2 ttu">
2884
+
2885
+ Example
2886
+
2887
+ </h5>
2888
+
2889
+
2890
+ <div class="mv-3 example">
2891
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2892
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2893
+ .gray-600
2894
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2895
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2896
+ <div class="example-demonstration">
2897
+
2898
+ <div class="bg-black pa-2">
2899
+ <code class="gray-600">
2900
+ .gray-600
2901
+ </code>
2902
+ </div>
2903
+
2904
+ </div>
2905
+ </div>
2906
+
2907
+
2908
+ </div>
2909
+
2910
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gray-700">
2911
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-700</code></h4>
2912
+ <pre class="f-3 highlighted-code"><span class="token selector">.gray-700</span> <span class="token punctuation">{</span>
2913
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
2914
+ <span class="token punctuation">}</span></pre>
2915
+ </div>
2916
+ <div class="ml-3">
2917
+ <p class="p">
2918
+ <p>Gray at weight 700 ().</p>
2919
+
2920
+ </p>
2921
+
2922
+
2923
+ <h5 class="f-2 ttu">
2924
+
2925
+ Example
2926
+
2927
+ </h5>
2928
+
2929
+
2930
+ <div class="mv-3 example">
2931
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2932
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-700<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2933
+ .gray-700
2934
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2935
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2936
+ <div class="example-demonstration">
2937
+
2938
+ <div class="bg-black pa-2">
2939
+ <code class="gray-700">
2940
+ .gray-700
2941
+ </code>
2942
+ </div>
2943
+
2944
+ </div>
2945
+ </div>
2946
+
2947
+
2948
+ </div>
2949
+
2950
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gray-800">
2951
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-800</code></h4>
2952
+ <pre class="f-3 highlighted-code"><span class="token selector">.gray-800</span> <span class="token punctuation">{</span>
2953
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
2954
+ <span class="token punctuation">}</span></pre>
2955
+ </div>
2956
+ <div class="ml-3">
2957
+ <p class="p">
2958
+ <p>Gray at weight 800 (second lightest).</p>
2959
+
2960
+ </p>
2961
+
2962
+
2963
+ <h5 class="f-2 ttu">
2964
+
2965
+ Example
2966
+
2967
+ </h5>
2968
+
2969
+
2970
+ <div class="mv-3 example">
2971
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2972
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2973
+ .gray-800
2974
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
2975
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
2976
+ <div class="example-demonstration">
2977
+
2978
+ <div class="bg-black pa-2">
2979
+ <code class="gray-800">
2980
+ .gray-800
2981
+ </code>
2982
+ </div>
2983
+
2984
+ </div>
2985
+ </div>
2986
+
2987
+
2988
+ </div>
2989
+
2990
+ <div class="mt-4 flex gap-3 items-center justify-between" id="gray-900">
2991
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.gray-900</code></h4>
2992
+ <pre class="f-3 highlighted-code"><span class="token selector">.gray-900</span> <span class="token punctuation">{</span>
2993
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
2994
+ <span class="token punctuation">}</span></pre>
2995
+ </div>
2996
+ <div class="ml-3">
2997
+ <p class="p">
2998
+ <p>Gray at weight 900 (lightest).</p>
2999
+
3000
+ </p>
3001
+
3002
+
3003
+ <h5 class="f-2 ttu">
3004
+
3005
+ Example
3006
+
3007
+ </h5>
3008
+
3009
+
3010
+ <div class="mv-3 example">
3011
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3012
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray-900<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3013
+ .gray-900
3014
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
3015
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
3016
+ <div class="example-demonstration">
3017
+
3018
+ <div class="bg-black pa-2">
3019
+ <code class="gray-900">
3020
+ .gray-900
3021
+ </code>
3022
+ </div>
3023
+
3024
+ </div>
3025
+ </div>
3026
+
3027
+
3028
+ </div>
3029
+
3030
+
3031
+ <h3 class="f-5 mt-4" id="class-scale:foreground-black">Black</h3>
3032
+ <p class="p">
3033
+ <p>Blacks.</p>
3034
+
3035
+ </p>
3036
+
3037
+ <h4 class="f-2 b">See Also</h3>
3038
+ <ul class="see-also">
3039
+
3040
+ <li><p><a href="/brut-css/properties/colors.html#property-scale:black">Black</a></p>
3041
+ </li>
3042
+
3043
+ </ul>
3044
+
3045
+
3046
+ <div class="mt-4 flex gap-3 items-center justify-between" id="black">
3047
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.black</code></h4>
3048
+ <pre class="f-3 highlighted-code"><span class="token selector">.black</span> <span class="token punctuation">{</span>
3049
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--black<span class="token punctuation">)</span><span class="token punctuation">;</span>
3050
+ <span class="token punctuation">}</span></pre>
3051
+ </div>
3052
+ <div class="ml-3">
3053
+ <p class="p">
3054
+ <p>Black (pure).</p>
3055
+
3056
+ </p>
3057
+
3058
+
3059
+ <h5 class="f-2 ttu">
3060
+
3061
+ Example
3062
+
3063
+ </h5>
3064
+
3065
+
3066
+ <div class="mv-3 example">
3067
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3068
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3069
+ .black
3070
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
3071
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
3072
+ <div class="example-demonstration">
3073
+
3074
+ <div class="bg-white pa-2">
3075
+ <code class="black">
3076
+ .black
3077
+ </code>
3078
+ </div>
3079
+
3080
+ </div>
3081
+ </div>
3082
+
3083
+
3084
+ </div>
3085
+
3086
+ <div class="mt-4 flex gap-3 items-center justify-between" id="black-ish">
3087
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.black-ish</code></h4>
3088
+ <pre class="f-3 highlighted-code"><span class="token selector">.black-ish</span> <span class="token punctuation">{</span>
3089
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--black-ish<span class="token punctuation">)</span><span class="token punctuation">;</span>
3090
+ <span class="token punctuation">}</span></pre>
3091
+ </div>
3092
+ <div class="ml-3">
3093
+ <p class="p">
3094
+ <p>Black (slightly off).</p>
3095
+
3096
+ </p>
3097
+
3098
+
3099
+ <h5 class="f-2 ttu">
3100
+
3101
+ Example
3102
+
3103
+ </h5>
3104
+
3105
+
3106
+ <div class="mv-3 example">
3107
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3108
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black-ish<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3109
+ .black-ish
3110
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
3111
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
3112
+ <div class="example-demonstration">
3113
+
3114
+ <div class="bg-white pa-2">
3115
+ <code class="black-ish">
3116
+ .black-ish
3117
+ </code>
3118
+ </div>
3119
+
3120
+ </div>
3121
+ </div>
3122
+
3123
+
3124
+ </div>
3125
+
3126
+
3127
+ <h3 class="f-5 mt-4" id="class-scale:foreground-white">White</h3>
3128
+ <p class="p">
3129
+ <p>Whites.</p>
3130
+
3131
+ </p>
3132
+
3133
+ <h4 class="f-2 b">See Also</h3>
3134
+ <ul class="see-also">
3135
+
3136
+ <li><p><a href="/brut-css/properties/colors.html#property-scale:white">White</a></p>
3137
+ </li>
3138
+
3139
+ </ul>
3140
+
3141
+
3142
+ <div class="mt-4 flex gap-3 items-center justify-between" id="white">
3143
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.white</code></h4>
3144
+ <pre class="f-3 highlighted-code"><span class="token selector">.white</span> <span class="token punctuation">{</span>
3145
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--white<span class="token punctuation">)</span><span class="token punctuation">;</span>
3146
+ <span class="token punctuation">}</span></pre>
3147
+ </div>
3148
+ <div class="ml-3">
3149
+ <p class="p">
3150
+ <p>White (pure).</p>
3151
+
3152
+ </p>
3153
+
3154
+
3155
+ <h5 class="f-2 ttu">
3156
+
3157
+ Example
3158
+
3159
+ </h5>
3160
+
3161
+
3162
+ <div class="mv-3 example">
3163
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3164
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3165
+ .white
3166
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
3167
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
3168
+ <div class="example-demonstration">
3169
+
3170
+ <div class="bg-black pa-2">
3171
+ <code class="white">
3172
+ .white
3173
+ </code>
3174
+ </div>
3175
+
3176
+ </div>
3177
+ </div>
3178
+
3179
+
3180
+ </div>
3181
+
3182
+ <div class="mt-4 flex gap-3 items-center justify-between" id="white-ish">
3183
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.white-ish</code></h4>
3184
+ <pre class="f-3 highlighted-code"><span class="token selector">.white-ish</span> <span class="token punctuation">{</span>
3185
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--white-ish<span class="token punctuation">)</span><span class="token punctuation">;</span>
3186
+ <span class="token punctuation">}</span></pre>
3187
+ </div>
3188
+ <div class="ml-3">
3189
+ <p class="p">
3190
+ <p>White (slightly off).</p>
3191
+
3192
+ </p>
3193
+
3194
+
3195
+ <h5 class="f-2 ttu">
3196
+
3197
+ Example
3198
+
3199
+ </h5>
3200
+
3201
+
3202
+ <div class="mv-3 example">
3203
+ <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3204
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white-ish<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
3205
+ .white-ish
3206
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
3207
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
3208
+ <div class="example-demonstration">
3209
+
3210
+ <div class="bg-black pa-2">
3211
+ <code class="white-ish">
3212
+ .white-ish
3213
+ </code>
3214
+ </div>
3215
+
3216
+ </div>
3217
+ </div>
3218
+
3219
+
3220
+ </div>
3221
+
3222
+
3223
+ </article>
3224
+ <div class="z-5 ma-0 overflow-y-auto pa-2 w-20 h-100 pos-absolute top-0 right-2">
3225
+ <div class="pa-3 ba bc-gray-700 bg-gray-900 br-3 shadow-1 ridiculous-liquid-glass-is-all-the-rage">
3226
+ <h3>On this Page</h3>
3227
+ <ul class="lst-none ma-0 pa-0">
3228
+
3229
+ <li class="lh-copy"><a href="#class-scale:foreground-red">Red</a></li>
3230
+
3231
+ <li class="lh-copy"><a href="#class-scale:foreground-orange">Orange</a></li>
3232
+
3233
+ <li class="lh-copy"><a href="#class-scale:foreground-yellow">Yellow</a></li>
3234
+
3235
+ <li class="lh-copy"><a href="#class-scale:foreground-green">Green</a></li>
3236
+
3237
+ <li class="lh-copy"><a href="#class-scale:foreground-blue">Blue</a></li>
3238
+
3239
+ <li class="lh-copy"><a href="#class-scale:foreground-purple">Purple</a></li>
3240
+
3241
+ <li class="lh-copy"><a href="#class-scale:foreground-gray">Gray</a></li>
3242
+
3243
+ <li class="lh-copy"><a href="#class-scale:foreground-black">Black</a></li>
3244
+
3245
+ <li class="lh-copy"><a href="#class-scale:foreground-white">White</a></li>
3246
+
3247
+ </ul>
3248
+ </div>
3249
+ </div>
3250
+ </div>
3251
+ <footer class="bg-black white mt-auto">
3252
+ <p class="tc">
3253
+ Copyright &copy; 2025 David Bryant Copeland.
3254
+ </p>
3255
+ </footer>
3256
+ </section>
3257
+ </main>
3258
+ </body>
3259
+
3260
+ </html>
3261
+