RubyGems - brut - Versions diffs - 0.17.0 → 0.18.1 - Mend

brut 0.17.0 → 0.18.1

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 (1103) hide show

checksums.yaml +4 -4
data/exe/brut +34 -0
data/lib/brut/cli/apps/build_assets.rb +78 -48
data/lib/brut/cli/apps/db.rb +168 -202
data/lib/brut/cli/apps/deploy.rb +291 -0
data/lib/brut/cli/apps/heroku_container_based_deploy.rb +6 -0
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/add_segment.rb +5 -5
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/add_segment_options.rb +1 -1
data/lib/brut/cli/apps/new/app.rb +240 -0
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/app_id.rb +1 -1
data/lib/brut/cli/apps/new/app_name.rb +29 -0
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/base.rb +9 -6
data/lib/brut/cli/apps/new/erb_binding_delegate.rb +23 -0
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/internet_identifier.rb +5 -5
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/invalid_identifier.rb +1 -1
data/{mkbrut/lib/mkbrut/app.rb → lib/brut/cli/apps/new/old_app.rb} +8 -11
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/add_css_import.rb +1 -1
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/add_i18n_message.rb +1 -1
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/add_method.rb +1 -1
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/append_to_file.rb +1 -1
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/base_op.rb +3 -3
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/copy_file.rb +1 -1
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/insert_code_in_method.rb +1 -1
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/insert_into_file.rb +1 -1
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/insert_route.rb +1 -1
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/mkdir.rb +1 -1
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/prism_parsing_op.rb +1 -1
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/render_template.rb +1 -1
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/ops/skip_file.rb +1 -1
data/lib/brut/cli/apps/new/ops.rb +17 -0
data/lib/brut/cli/apps/new/organization.rb +5 -0
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/prefix.rb +1 -1
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/segments/bare_bones.rb +12 -11
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/segments/demo.rb +16 -15
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/segments/heroku.rb +9 -5
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/segments/sidekiq.rb +44 -21
data/lib/brut/cli/apps/new/segments.rb +8 -0
data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/versions.rb +3 -3
data/lib/brut/cli/apps/new.rb +26 -0
data/lib/brut/cli/apps/scaffold.rb +150 -141
data/lib/brut/cli/apps/test.rb +92 -68
data/lib/brut/cli/commands/base_command.rb +174 -0
data/lib/brut/cli/commands/compound_command.rb +29 -0
data/lib/brut/cli/commands/execution_context.rb +32 -0
data/lib/brut/cli/commands/help.rb +26 -0
data/lib/brut/cli/commands/output_error.rb +13 -0
data/lib/brut/cli/commands/raise_error.rb +11 -0
data/lib/brut/cli/commands.rb +8 -0
data/lib/brut/cli/execute_result.rb +39 -0
data/lib/brut/cli/executor.rb +9 -4
data/lib/brut/cli/output.rb +13 -0
data/lib/brut/cli/parsed_command_line.rb +143 -0
data/lib/brut/cli/runner.rb +124 -0
data/lib/brut/cli.rb +7 -29
data/lib/brut/framework/container.rb +1 -1
data/lib/brut/framework/mcp.rb +59 -13
data/lib/brut/framework/project_environment.rb +3 -1
data/lib/brut/junk_drawer.rb +3 -1
data/lib/brut/spec_support/cli_command_support.rb +45 -0
data/lib/brut/spec_support/e2e_test_server.rb +3 -0
data/lib/brut/spec_support/general_support.rb +1 -1
data/lib/brut/spec_support/matchers/have_executed.rb +35 -0
data/lib/brut/spec_support/rspec_setup.rb +4 -8
data/lib/brut/spec_support.rb +1 -0
data/lib/brut/tui/markup_string.rb +2 -0
data/lib/brut/tui/script/events/command_std_out.rb +3 -2
data/lib/brut/tui/script/exec_step.rb +11 -4
data/lib/brut/tui/script/puts_subscriber.rb +4 -4
data/lib/brut/tui/script.rb +7 -3
data/lib/brut/tui/terminal_theme.rb +15 -11
data/lib/brut/version.rb +1 -1
data/templates/Base/.env.development.local +2 -0
data/templates/Base/bin/ci +42 -0
data/{mkbrut/templates → templates}/Base/bin/release +2 -2
data/templates/Base/bin/setup +174 -0
data/{mkbrut/templates → templates}/Base/bin/watch-and-build-assets +1 -1
data/{mkbrut/templates → templates}/Base/dx/docker-compose.env.erb +1 -1
data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/css/fonts.css +1 -1
data/{mkbrut/templates → templates}/segments/Heroku/deploy/Dockerfile +2 -2
data/templates/segments/Heroku/deploy/docker_config.rb +30 -0
metadata +190 -1055
data/.gitignore +0 -61
data/.projections.json +0 -10
data/CHANGELOG.md +0 -172
data/CODE_OF_CONDUCT.txt +0 -99
data/Dockerfile.dx +0 -82
data/Gemfile +0 -6
data/Gemfile.lock +0 -246
data/LICENSE.txt +0 -370
data/README.md +0 -90
data/Rakefile +0 -25
data/assets/Logo-Square.pxd +0 -0
data/assets/LogoPylon.pxd +0 -0
data/assets/LogoStop.pxd +0 -0
data/assets/LogoTall.pxd +0 -0
data/assets/MetroIcon.graffle +0 -0
data/assets/MetroLogo.graffle +0 -0
data/assets/SocialImage.png +0 -0
data/assets/SocialImage.pxd +0 -0
data/assets/YouTubeThumb.pxd +0 -0
data/bin/bin_kit.rb +0 -51
data/bin/build +0 -86
data/bin/ci +0 -40
data/bin/dev +0 -20
data/bin/docs +0 -86
data/bin/generate-and-run-rubocop +0 -52
data/bin/new-version +0 -8
data/bin/publish +0 -61
data/bin/rake +0 -27
data/bin/rspec +0 -27
data/bin/rubocop +0 -27
data/bin/setup +0 -252
data/bin/test +0 -18
data/brut-css/.nvim.lua +0 -1
data/brut-css/README.md +0 -28
data/brut-css/bin/build +0 -50
data/brut-css/bin/ci +0 -19
data/brut-css/bin/dev +0 -1
data/brut-css/bin/docs +0 -34
data/brut-css/bin/publish +0 -21
data/brut-css/bin/setup +0 -6
data/brut-css/config/media-queries-all.css +0 -15
data/brut-css/config/media-queries-minimal.css +0 -5
data/brut-css/config/postcss.config.cjs +0 -7
data/brut-css/config/pseudo-classes-all.css +0 -9
data/brut-css/dx +0 -1
data/brut-css/package-lock.json +0 -3165
data/brut-css/package.json +0 -36
data/brut-css/src/css/appearance.css +0 -145
data/brut-css/src/css/border.css +0 -522
data/brut-css/src/css/colors.css +0 -3502
data/brut-css/src/css/dimensions.css +0 -548
data/brut-css/src/css/flex.css +0 -179
data/brut-css/src/css/index.css +0 -13
data/brut-css/src/css/layout.css +0 -120
data/brut-css/src/css/list.css +0 -41
data/brut-css/src/css/positioning.css +0 -354
data/brut-css/src/css/properties/colors.css +0 -455
data/brut-css/src/css/properties/index.css +0 -3
data/brut-css/src/css/properties/spacing.css +0 -140
data/brut-css/src/css/properties/typography.css +0 -224
data/brut-css/src/css/reset.css +0 -107
data/brut-css/src/css/spacing.css +0 -585
data/brut-css/src/css/typography.css +0 -519
data/brut-css/src/css/utils.css +0 -104
data/brut-css/src/docs/1_getting-started/1_overview.md +0 -46
data/brut-css/src/docs/1_getting-started/2_installation.md +0 -25
data/brut-css/src/docs/1_getting-started/3_core-concepts.md +0 -75
data/brut-css/src/docs/1_getting-started/4_simple-example.md +0 -132
data/brut-css/src/docs/1_getting-started/page.html.ejs +0 -10
data/brut-css/src/docs/2_properties/page.html.ejs +0 -71
data/brut-css/src/docs/3_classes/color-demo.html.ejs +0 -31
data/brut-css/src/docs/3_classes/page.html.ejs +0 -87
data/brut-css/src/docs/4_customization/1_design-system.md +0 -36
data/brut-css/src/docs/4_customization/2_breakpoints.md +0 -75
data/brut-css/src/docs/4_customization/3_pseudo-classes.md +0 -74
data/brut-css/src/docs/4_customization/4_advanced-configuration.md +0 -40
data/brut-css/src/docs/4_customization/page.html.ejs +0 -10
data/brut-css/src/docs/docs.css +0 -98
data/brut-css/src/docs/includes/body-and-header.html.ejs +0 -30
data/brut-css/src/docs/includes/footer-and-rest.html.ejs +0 -9
data/brut-css/src/docs/includes/head.html.ejs +0 -5
data/brut-css/src/docs/includes/nav.html.ejs +0 -10
data/brut-css/src/docs/index.html.ejs +0 -32
data/brut-css/src/docs/prism-twilight.min.css +0 -1
data/brut-css/src/js/Logger.js +0 -71
data/brut-css/src/js/build.js +0 -111
data/brut-css/src/js/cli/CLIArgError.js +0 -7
data/brut-css/src/js/cli/Debug.js +0 -27
data/brut-css/src/js/cli/DocsDir.js +0 -16
data/brut-css/src/js/cli/DocsTemplateSourceDir.js +0 -16
data/brut-css/src/js/cli/InputFile.js +0 -31
data/brut-css/src/js/cli/MediaQueryConfigFile.js +0 -10
data/brut-css/src/js/cli/OutputFile.js +0 -22
data/brut-css/src/js/cli/ParsedArg.js +0 -17
data/brut-css/src/js/cli/PathToBrutCSSRoot.js +0 -19
data/brut-css/src/js/cli/PseudoClassConfigFile.js +0 -11
data/brut-css/src/js/cli.js +0 -108
data/brut-css/src/js/docGenerator.js +0 -467
data/brut-css/src/js/mediaQueryConfigParser.js +0 -98
data/brut-css/src/js/post-css-plugins/addMediaQueriesPlugin.js +0 -49
data/brut-css/src/js/post-css-plugins/addPseudoClassesPlugin.js +0 -42
data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Category.js +0 -9
data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/DocState.js +0 -185
data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Documentable.js +0 -8
data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Group.js +0 -7
data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/ParsedComment.js +0 -73
data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Property.js +0 -9
data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyCategory.js +0 -4
data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyGroup.js +0 -8
data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Rule.js +0 -12
data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleCategory.js +0 -4
data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleGroup.js +0 -8
data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeRef.js +0 -5
data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeURL.js +0 -9
data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin.js +0 -49
data/brut-css/src/js/post-css-plugins/generateRootCustomPropertiesPlugin.js +0 -45
data/brut-css/src/js/pseudoClassConfigParser.js +0 -145
data/brut-js/.projections.json +0 -10
data/brut-js/README.md +0 -118
data/brut-js/bin/build +0 -19
data/brut-js/bin/ci +0 -5
data/brut-js/bin/docs +0 -25
data/brut-js/bin/publish +0 -21
data/brut-js/bin/setup +0 -6
data/brut-js/docs/README.md +0 -8
data/brut-js/docs/jsdoc-plugins/customElementTag.js +0 -8
data/brut-js/docs/jsdoc-theme/publish.js +0 -692
data/brut-js/docs/jsdoc-theme/static/scripts/linenumber.js +0 -25
data/brut-js/docs/jsdoc-theme/static/scripts/prettify/Apache-License-2.0.txt +0 -202
data/brut-js/docs/jsdoc-theme/static/scripts/prettify/lang-css.js +0 -2
data/brut-js/docs/jsdoc-theme/static/scripts/prettify/prettify.js +0 -28
data/brut-js/docs/jsdoc-theme/static/styles/jsdoc-default.css +0 -327
data/brut-js/docs/jsdoc-theme/static/styles/prettify-jsdoc.css +0 -111
data/brut-js/docs/jsdoc-theme/static/styles/prettify-tomorrow.css +0 -132
data/brut-js/docs/jsdoc-theme/tmpl/augments.tmpl +0 -10
data/brut-js/docs/jsdoc-theme/tmpl/container.tmpl +0 -199
data/brut-js/docs/jsdoc-theme/tmpl/details.tmpl +0 -143
data/brut-js/docs/jsdoc-theme/tmpl/example.tmpl +0 -2
data/brut-js/docs/jsdoc-theme/tmpl/examples.tmpl +0 -13
data/brut-js/docs/jsdoc-theme/tmpl/exceptions.tmpl +0 -32
data/brut-js/docs/jsdoc-theme/tmpl/layout.tmpl +0 -38
data/brut-js/docs/jsdoc-theme/tmpl/mainpage.tmpl +0 -14
data/brut-js/docs/jsdoc-theme/tmpl/members.tmpl +0 -38
data/brut-js/docs/jsdoc-theme/tmpl/method.tmpl +0 -131
data/brut-js/docs/jsdoc-theme/tmpl/modifies.tmpl +0 -14
data/brut-js/docs/jsdoc-theme/tmpl/params.tmpl +0 -131
data/brut-js/docs/jsdoc-theme/tmpl/properties.tmpl +0 -108
data/brut-js/docs/jsdoc-theme/tmpl/returns.tmpl +0 -19
data/brut-js/docs/jsdoc-theme/tmpl/source.tmpl +0 -8
data/brut-js/docs/jsdoc-theme/tmpl/tutorial.tmpl +0 -19
data/brut-js/docs/jsdoc-theme/tmpl/type.tmpl +0 -7
data/brut-js/docs/jsdoc.config.json +0 -23
data/brut-js/docs/package-lock.json +0 -343
data/brut-js/docs/package.json +0 -7
data/brut-js/dx +0 -1
data/brut-js/package-lock.json +0 -2210
data/brut-js/package.json +0 -36
data/brut-js/specs/AjaxSubmit.spec.js +0 -453
data/brut-js/specs/Autosubmit.spec.js +0 -127
data/brut-js/specs/ConfirmSubmit.spec.js +0 -224
data/brut-js/specs/ConstraintViolationMessage.spec.js +0 -33
data/brut-js/specs/ConstraintViolationMessages.spec.js +0 -32
data/brut-js/specs/CopyToClipboard.spec.js +0 -35
data/brut-js/specs/Form.spec.js +0 -137
data/brut-js/specs/I18nTranslation.spec.js +0 -19
data/brut-js/specs/LocaleDetection.spec.js +0 -22
data/brut-js/specs/Message.spec.js +0 -15
data/brut-js/specs/SpecHelper.js +0 -23
data/brut-js/specs/Tabs.spec.js +0 -41
data/brut-js/specs/Toast.spec.js +0 -34
data/brut-js/specs/config/asset_metadata.json +0 -7
data/brut-js/src/AjaxSubmit.js +0 -499
data/brut-js/src/Autosubmit.js +0 -63
data/brut-js/src/BaseCustomElement.js +0 -261
data/brut-js/src/ConfirmSubmit.js +0 -137
data/brut-js/src/ConfirmationDialog.js +0 -143
data/brut-js/src/ConstraintViolationMessage.js +0 -140
data/brut-js/src/ConstraintViolationMessages.js +0 -98
data/brut-js/src/CopyToClipboard.js +0 -96
data/brut-js/src/Form.js +0 -147
data/brut-js/src/I18nTranslation.js +0 -64
data/brut-js/src/LocaleDetection.js +0 -117
data/brut-js/src/Logger.js +0 -90
data/brut-js/src/Message.js +0 -62
data/brut-js/src/RichString.js +0 -116
data/brut-js/src/Tabs.js +0 -168
data/brut-js/src/Toast.js +0 -102
data/brut-js/src/Tracing.js +0 -247
data/brut-js/src/appForTestingOnly.js +0 -15
data/brut-js/src/index.js +0 -133
data/brut-js/src/testing/AssetMetadata.js +0 -35
data/brut-js/src/testing/AssetMetadataLoader.js +0 -25
data/brut-js/src/testing/CustomElementTest.js +0 -235
data/brut-js/src/testing/DOMCreator.js +0 -45
data/brut-js/src/testing/index.js +0 -48
data/brut.gemspec +0 -73
data/brutrb.com/.vitepress/config.mjs +0 -164
data/brutrb.com/.vitepress/plugins/jsdocLinker.js +0 -34
data/brutrb.com/.vitepress/plugins/rdocLinker.js +0 -18
data/brutrb.com/.vitepress/theme/custom.css +0 -14
data/brutrb.com/.vitepress/theme/index.js +0 -18
data/brutrb.com/.vitepress/theme/style.css +0 -139
data/brutrb.com/adrs.md +0 -16
data/brutrb.com/ai.md +0 -68
data/brutrb.com/assets.md +0 -131
data/brutrb.com/bin/build +0 -5
data/brutrb.com/bin/deploy +0 -7
data/brutrb.com/bin/dev +0 -5
data/brutrb.com/bin/setup +0 -6
data/brutrb.com/brut-js.md +0 -128
data/brutrb.com/business-logic.md +0 -55
data/brutrb.com/cli.md +0 -274
data/brutrb.com/components.md +0 -265
data/brutrb.com/configuration.md +0 -256
data/brutrb.com/css.md +0 -103
data/brutrb.com/custom-element-tests.md +0 -148
data/brutrb.com/database-access.md +0 -201
data/brutrb.com/database-schema.md +0 -320
data/brutrb.com/deployment.md +0 -158
data/brutrb.com/dev-environment.md +0 -186
data/brutrb.com/dir-structure.md +0 -120
data/brutrb.com/doc-conventions.md +0 -41
data/brutrb.com/dx +0 -1
data/brutrb.com/end-to-end-tests.md +0 -176
data/brutrb.com/features.md +0 -373
data/brutrb.com/flash-and-session.md +0 -208
data/brutrb.com/form-constraints.md +0 -266
data/brutrb.com/forms.md +0 -238
data/brutrb.com/getting-started.md +0 -142
data/brutrb.com/handlers.md +0 -177
data/brutrb.com/hooks.md +0 -176
data/brutrb.com/i18n.md +0 -190
data/brutrb.com/images/DevEnvironment.graffle +0 -0
data/brutrb.com/images/DevEnvironment.png +0 -0
data/brutrb.com/images/LogoSquare.png +0 -0
data/brutrb.com/images/LogoStop.png +0 -0
data/brutrb.com/images/LogoTall.png +0 -0
data/brutrb.com/images/Makefile +0 -10
data/brutrb.com/images/OverviewMetro.graffle +0 -0
data/brutrb.com/images/OverviewMetro.png +0 -0
data/brutrb.com/images/dev-env-overview.dot +0 -54
data/brutrb.com/images/dev-env-overview.png +0 -0
data/brutrb.com/images/dev-env-protocol.dot +0 -37
data/brutrb.com/images/dev-env-protocol.png +0 -0
data/brutrb.com/images/overview.graffle +0 -0
data/brutrb.com/images/overview.png +0 -0
data/brutrb.com/images/spa.dot +0 -19
data/brutrb.com/images/spa.png +0 -0
data/brutrb.com/images/tutorial/02-confirmation-dialog-browser-element-styled.png +0 -0
data/brutrb.com/images/tutorial/02-confirmation-dialog-browser-element.png +0 -0
data/brutrb.com/images/tutorial/02-confirmation-dialog-browser.png +0 -0
data/brutrb.com/images/tutorial/02-confirmation-flow.graffle +0 -0
data/brutrb.com/images/tutorial/02-confirmation-flow.png +0 -0
data/brutrb.com/images/tutorial/basic-form-with-violations.png +0 -0
data/brutrb.com/images/tutorial/basic-form.png +0 -0
data/brutrb.com/images/tutorial/initial-home-page.png +0 -0
data/brutrb.com/images/tutorial/new-post-editor.png +0 -0
data/brutrb.com/images/tutorial/new-post-home-page.png +0 -0
data/brutrb.com/images/tutorial/styled-form-with-server-side-violations.png +0 -0
data/brutrb.com/images/tutorial/styled-form-with-violations.png +0 -0
data/brutrb.com/images/tutorial/styled-home-page-with-posts.png +0 -0
data/brutrb.com/images/tutorial/styled-home-page.png +0 -0
data/brutrb.com/images/tutorial/welcome-to-brut.png +0 -0
data/brutrb.com/images/workspace-protocol.dot +0 -44
data/brutrb.com/images/workspace-protocol.png +0 -0
data/brutrb.com/index.md +0 -34
data/brutrb.com/instrumentation.md +0 -331
data/brutrb.com/javascript.md +0 -122
data/brutrb.com/jobs.md +0 -114
data/brutrb.com/keyword-injection.md +0 -195
data/brutrb.com/layouts.md +0 -156
data/brutrb.com/lsp.md +0 -23
data/brutrb.com/markdown-examples.md +0 -85
data/brutrb.com/middleware.md +0 -80
data/brutrb.com/overview.md +0 -68
data/brutrb.com/package-lock.json +0 -2451
data/brutrb.com/package.json +0 -11
data/brutrb.com/pages.md +0 -290
data/brutrb.com/public/SocialImage.png +0 -0
data/brutrb.com/public/favicon.ico +0 -0
data/brutrb.com/recipes/alternate-layouts.md +0 -32
data/brutrb.com/recipes/authentication.md +0 -336
data/brutrb.com/recipes/custom-flash.md +0 -51
data/brutrb.com/recipes/dev-env-secrets.md +0 -87
data/brutrb.com/recipes/form-errors.md +0 -148
data/brutrb.com/recipes/indexed-forms.md +0 -149
data/brutrb.com/recipes/migrations.md +0 -210
data/brutrb.com/recipes/text-field-component.md +0 -182
data/brutrb.com/roadmap.md +0 -52
data/brutrb.com/routes.md +0 -189
data/brutrb.com/security.md +0 -102
data/brutrb.com/seed-data.md +0 -63
data/brutrb.com/space-time-continuum.md +0 -81
data/brutrb.com/tutorial.md +0 -138
data/brutrb.com/tutorials/01-intro.md +0 -1654
data/brutrb.com/tutorials/02-dialog.md +0 -569
data/brutrb.com/unit-tests.md +0 -148
data/brutrb.com/why.md +0 -19
data/docker-compose.dx.yml +0 -25
data/docs/404.html +0 -26
data/docs/CNAME +0 -1
data/docs/SocialImage.png +0 -0
data/docs/adrs.html +0 -29
data/docs/ai.html +0 -29
data/docs/api/Brut/BackEnd/SeedData.html +0 -493
data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server/FlushSpans.html +0 -214
data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server.html +0 -125
data/docs/api/Brut/BackEnd/Sidekiq/Middlewares.html +0 -125
data/docs/api/Brut/BackEnd/Sidekiq.html +0 -125
data/docs/api/Brut/BackEnd/Validators/FormValidator.html +0 -414
data/docs/api/Brut/BackEnd/Validators.html +0 -128
data/docs/api/Brut/BackEnd.html +0 -132
data/docs/api/Brut/CLI/App.html +0 -1601
data/docs/api/Brut/CLI/AppRunner.html +0 -491
data/docs/api/Brut/CLI/Apps/BuildAssets/All.html +0 -264
data/docs/api/Brut/CLI/Apps/BuildAssets/CSS.html +0 -306
data/docs/api/Brut/CLI/Apps/BuildAssets/Images.html +0 -262
data/docs/api/Brut/CLI/Apps/BuildAssets/JS.html +0 -314
data/docs/api/Brut/CLI/Apps/BuildAssets.html +0 -183
data/docs/api/Brut/CLI/Apps/DB/Create.html +0 -365
data/docs/api/Brut/CLI/Apps/DB/Drop.html +0 -357
data/docs/api/Brut/CLI/Apps/DB/Migrate.html +0 -389
data/docs/api/Brut/CLI/Apps/DB/NewMigration.html +0 -339
data/docs/api/Brut/CLI/Apps/DB/Rebuild.html +0 -329
data/docs/api/Brut/CLI/Apps/DB/Seed.html +0 -347
data/docs/api/Brut/CLI/Apps/DB/Status.html +0 -383
data/docs/api/Brut/CLI/Apps/DB.html +0 -183
data/docs/api/Brut/CLI/Apps/DeployBase/GitChecks.html +0 -270
data/docs/api/Brut/CLI/Apps/DeployBase.html +0 -257
data/docs/api/Brut/CLI/Apps/HerokuContainerBasedDeploy/Deploy.html +0 -587
data/docs/api/Brut/CLI/Apps/HerokuContainerBasedDeploy.html +0 -196
data/docs/api/Brut/CLI/Apps/Scaffold/Action/Route.html +0 -303
data/docs/api/Brut/CLI/Apps/Scaffold/Action.html +0 -508
data/docs/api/Brut/CLI/Apps/Scaffold/Component.html +0 -398
data/docs/api/Brut/CLI/Apps/Scaffold/CustomElementTest.html +0 -374
data/docs/api/Brut/CLI/Apps/Scaffold/DbModel.html +0 -384
data/docs/api/Brut/CLI/Apps/Scaffold/E2ETest.html +0 -410
data/docs/api/Brut/CLI/Apps/Scaffold/Form.html +0 -262
data/docs/api/Brut/CLI/Apps/Scaffold/Page/Route.html +0 -303
data/docs/api/Brut/CLI/Apps/Scaffold/Page.html +0 -480
data/docs/api/Brut/CLI/Apps/Scaffold/RoutesEditor.html +0 -450
data/docs/api/Brut/CLI/Apps/Scaffold/Test.html +0 -380
data/docs/api/Brut/CLI/Apps/Scaffold.html +0 -253
data/docs/api/Brut/CLI/Apps/Test/Audit.html +0 -474
data/docs/api/Brut/CLI/Apps/Test/E2e.html +0 -407
data/docs/api/Brut/CLI/Apps/Test/JS.html +0 -262
data/docs/api/Brut/CLI/Apps/Test/Run.html +0 -578
data/docs/api/Brut/CLI/Apps/Test.html +0 -253
data/docs/api/Brut/CLI/Apps.html +0 -125
data/docs/api/Brut/CLI/Command.html +0 -2425
data/docs/api/Brut/CLI/Error.html +0 -139
data/docs/api/Brut/CLI/ExecutionResults/Result.html +0 -664
data/docs/api/Brut/CLI/ExecutionResults.html +0 -675
data/docs/api/Brut/CLI/Executor.html +0 -561
data/docs/api/Brut/CLI/InvalidOption.html +0 -245
data/docs/api/Brut/CLI/Options.html +0 -880
data/docs/api/Brut/CLI/Output.html +0 -699
data/docs/api/Brut/CLI/SystemExecError.html +0 -451
data/docs/api/Brut/CLI.html +0 -263
data/docs/api/Brut/FactoryBot.html +0 -225
data/docs/api/Brut/Framework/App.html +0 -1097
data/docs/api/Brut/Framework/Config.html +0 -1071
data/docs/api/Brut/Framework/Container.html +0 -1464
data/docs/api/Brut/Framework/Error.html +0 -140
data/docs/api/Brut/Framework/Errors/AbstractMethod.html +0 -232
data/docs/api/Brut/Framework/Errors/Bug.html +0 -234
data/docs/api/Brut/Framework/Errors/MissingConfiguration.html +0 -257
data/docs/api/Brut/Framework/Errors/MissingParameter.html +0 -273
data/docs/api/Brut/Framework/Errors/NoClassForPath.html +0 -471
data/docs/api/Brut/Framework/Errors/NotFound.html +0 -308
data/docs/api/Brut/Framework/Errors/NotImplemented.html +0 -234
data/docs/api/Brut/Framework/Errors.html +0 -351
data/docs/api/Brut/Framework/FussyTypeEnforcement.html +0 -392
data/docs/api/Brut/Framework/MCP.html +0 -871
data/docs/api/Brut/Framework/ProjectEnvironment.html +0 -648
data/docs/api/Brut/Framework.html +0 -129
data/docs/api/Brut/FrontEnd/AssetPathResolver.html +0 -317
data/docs/api/Brut/FrontEnd/Component/Helpers.html +0 -420
data/docs/api/Brut/FrontEnd/Component.html +0 -434
data/docs/api/Brut/FrontEnd/Components/ConstraintViolations.html +0 -491
data/docs/api/Brut/FrontEnd/Components/FormTag.html +0 -526
data/docs/api/Brut/FrontEnd/Components/I18nTranslations.html +0 -313
data/docs/api/Brut/FrontEnd/Components/Input.html +0 -195
data/docs/api/Brut/FrontEnd/Components/Inputs/ButtonTag.html +0 -447
data/docs/api/Brut/FrontEnd/Components/Inputs/CsrfToken.html +0 -339
data/docs/api/Brut/FrontEnd/Components/Inputs/InputTag.html +0 -568
data/docs/api/Brut/FrontEnd/Components/Inputs/RadioButton.html +0 -419
data/docs/api/Brut/FrontEnd/Components/Inputs/SelectTagWithOptions.html +0 -610
data/docs/api/Brut/FrontEnd/Components/Inputs/TextareaTag.html +0 -534
data/docs/api/Brut/FrontEnd/Components/Inputs.html +0 -125
data/docs/api/Brut/FrontEnd/Components/LocaleDetection.html +0 -367
data/docs/api/Brut/FrontEnd/Components/PageIdentifier.html +0 -355
data/docs/api/Brut/FrontEnd/Components/TimeTag.html +0 -655
data/docs/api/Brut/FrontEnd/Components/Traceparent.html +0 -352
data/docs/api/Brut/FrontEnd/Components.html +0 -156
data/docs/api/Brut/FrontEnd/CsrfProtector.html +0 -250
data/docs/api/Brut/FrontEnd/Download.html +0 -467
data/docs/api/Brut/FrontEnd/Flash.html +0 -1150
data/docs/api/Brut/FrontEnd/Form.html +0 -1227
data/docs/api/Brut/FrontEnd/Forms/Button.html +0 -331
data/docs/api/Brut/FrontEnd/Forms/ButtonInputDefinition.html +0 -537
data/docs/api/Brut/FrontEnd/Forms/ConstraintViolation.html +0 -590
data/docs/api/Brut/FrontEnd/Forms/Input/Color.html +0 -201
data/docs/api/Brut/FrontEnd/Forms/Input/TimeOfDay.html +0 -535
data/docs/api/Brut/FrontEnd/Forms/Input.html +0 -1567
data/docs/api/Brut/FrontEnd/Forms/InputDeclarations.html +0 -635
data/docs/api/Brut/FrontEnd/Forms/InputDefinition.html +0 -1336
data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInput.html +0 -730
data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInputDefinition.html +0 -587
data/docs/api/Brut/FrontEnd/Forms/SelectInput.html +0 -734
data/docs/api/Brut/FrontEnd/Forms/SelectInputDefinition.html +0 -582
data/docs/api/Brut/FrontEnd/Forms/ValidityState.html +0 -659
data/docs/api/Brut/FrontEnd/Forms.html +0 -127
data/docs/api/Brut/FrontEnd/GenericResponse.html +0 -377
data/docs/api/Brut/FrontEnd/Handler.html +0 -442
data/docs/api/Brut/FrontEnd/Handlers/CspReportingHandler.html +0 -318
data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler/TraceParent.html +0 -336
data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler.html +0 -399
data/docs/api/Brut/FrontEnd/Handlers/LocaleDetectionHandler.html +0 -354
data/docs/api/Brut/FrontEnd/Handlers/MissingHandler/Form.html +0 -151
data/docs/api/Brut/FrontEnd/Handlers/MissingHandler.html +0 -315
data/docs/api/Brut/FrontEnd/Handlers.html +0 -125
data/docs/api/Brut/FrontEnd/HandlingResults.html +0 -339
data/docs/api/Brut/FrontEnd/HttpMethod.html +0 -661
data/docs/api/Brut/FrontEnd/HttpStatus.html +0 -496
data/docs/api/Brut/FrontEnd/InlineSvgLocator.html +0 -284
data/docs/api/Brut/FrontEnd/Layout.html +0 -486
data/docs/api/Brut/FrontEnd/Middleware.html +0 -135
data/docs/api/Brut/FrontEnd/Middlewares/AnnotateBrutOwnedPaths.html +0 -288
data/docs/api/Brut/FrontEnd/Middlewares/Favicon.html +0 -292
data/docs/api/Brut/FrontEnd/Middlewares/OpenTelemetrySpan.html +0 -324
data/docs/api/Brut/FrontEnd/Middlewares/ReloadApp.html +0 -376
data/docs/api/Brut/FrontEnd/Middlewares.html +0 -125
data/docs/api/Brut/FrontEnd/Page.html +0 -781
data/docs/api/Brut/FrontEnd/Pages/MissingPage.html +0 -797
data/docs/api/Brut/FrontEnd/Pages.html +0 -125
data/docs/api/Brut/FrontEnd/RequestContext.html +0 -1312
data/docs/api/Brut/FrontEnd/RouteHook.html +0 -424
data/docs/api/Brut/FrontEnd/RouteHooks/AgeFlash.html +0 -242
data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineScripts.html +0 -249
data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts/ReportOnly.html +0 -264
data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts.html +0 -261
data/docs/api/Brut/FrontEnd/RouteHooks/LocaleDetection.html +0 -284
data/docs/api/Brut/FrontEnd/RouteHooks/SetupRequestContext.html +0 -252
data/docs/api/Brut/FrontEnd/RouteHooks.html +0 -115
data/docs/api/Brut/FrontEnd/Routing/FormHandlerRoute.html +0 -227
data/docs/api/Brut/FrontEnd/Routing/FormRoute.html +0 -305
data/docs/api/Brut/FrontEnd/Routing/MissingForm.html +0 -324
data/docs/api/Brut/FrontEnd/Routing/MissingHandler.html +0 -319
data/docs/api/Brut/FrontEnd/Routing/MissingPage.html +0 -315
data/docs/api/Brut/FrontEnd/Routing/MissingPath.html +0 -315
data/docs/api/Brut/FrontEnd/Routing/PageRoute.html +0 -327
data/docs/api/Brut/FrontEnd/Routing/Route.html +0 -761
data/docs/api/Brut/FrontEnd/Routing.html +0 -927
data/docs/api/Brut/FrontEnd/Session.html +0 -1195
data/docs/api/Brut/FrontEnd.html +0 -134
data/docs/api/Brut/I18n/BaseMethods.html +0 -931
data/docs/api/Brut/I18n/ForBackEnd.html +0 -302
data/docs/api/Brut/I18n/ForCLI.html +0 -302
data/docs/api/Brut/I18n/ForHTML.html +0 -296
data/docs/api/Brut/I18n/HTTPAcceptLanguage/AlwaysEnglish.html +0 -316
data/docs/api/Brut/I18n/HTTPAcceptLanguage.html +0 -930
data/docs/api/Brut/I18n.html +0 -127
data/docs/api/Brut/Instrumentation/LoggerSpanExporter.html +0 -435
data/docs/api/Brut/Instrumentation/Methods/ClassMethods.html +0 -596
data/docs/api/Brut/Instrumentation/Methods.html +0 -173
data/docs/api/Brut/Instrumentation/OpenTelemetry/NormalizedAttributes.html +0 -286
data/docs/api/Brut/Instrumentation/OpenTelemetry/Span.html +0 -302
data/docs/api/Brut/Instrumentation/OpenTelemetry.html +0 -866
data/docs/api/Brut/Instrumentation.html +0 -128
data/docs/api/Brut/RubocopConfig.html +0 -237
data/docs/api/Brut/SinatraHelpers/ClassMethods.html +0 -534
data/docs/api/Brut/SinatraHelpers.html +0 -281
data/docs/api/Brut/SpecSupport/ClockSupport.html +0 -383
data/docs/api/Brut/SpecSupport/ComponentSupport.html +0 -496
data/docs/api/Brut/SpecSupport/E2ETestServer.html +0 -503
data/docs/api/Brut/SpecSupport/E2eSupport.html +0 -142
data/docs/api/Brut/SpecSupport/EnhancedNode.html +0 -403
data/docs/api/Brut/SpecSupport/FlashSupport.html +0 -278
data/docs/api/Brut/SpecSupport/GeneralSupport/ClassMethods.html +0 -401
data/docs/api/Brut/SpecSupport/GeneralSupport.html +0 -195
data/docs/api/Brut/SpecSupport/HandlerSupport.html +0 -160
data/docs/api/Brut/SpecSupport/Matchers/BeABug.html +0 -142
data/docs/api/Brut/SpecSupport/Matchers/BePageFor.html +0 -142
data/docs/api/Brut/SpecSupport/Matchers/BeRoutingFor.html +0 -155
data/docs/api/Brut/SpecSupport/Matchers/HaveConstraintViolation.html +0 -583
data/docs/api/Brut/SpecSupport/Matchers/HaveGenerated.html +0 -149
data/docs/api/Brut/SpecSupport/Matchers/HaveHTMLAttribute.html +0 -466
data/docs/api/Brut/SpecSupport/Matchers/HaveI18nString.html +0 -149
data/docs/api/Brut/SpecSupport/Matchers/HaveLinkTo.html +0 -149
data/docs/api/Brut/SpecSupport/Matchers/HaveRedirectedTo.html +0 -165
data/docs/api/Brut/SpecSupport/Matchers/HaveReturnedHttpStatus.html +0 -158
data/docs/api/Brut/SpecSupport/Matchers/HaveReturnedRackResponse.html +0 -156
data/docs/api/Brut/SpecSupport/Matchers.html +0 -125
data/docs/api/Brut/SpecSupport/RSpecSetup/OptionalSidekiqSupport.html +0 -335
data/docs/api/Brut/SpecSupport/RSpecSetup.html +0 -637
data/docs/api/Brut/SpecSupport/SessionSupport.html +0 -196
data/docs/api/Brut/SpecSupport.html +0 -129
data/docs/api/Brut/TUI/AnsiEscapeCode/Mod.html +0 -409
data/docs/api/Brut/TUI/AnsiEscapeCode.html +0 -426
data/docs/api/Brut/TUI/EventLoop/Deque.html +0 -531
data/docs/api/Brut/TUI/EventLoop.html +0 -676
data/docs/api/Brut/TUI/Events/BaseEvent.html +0 -449
data/docs/api/Brut/TUI/Events/EventBus.html +0 -485
data/docs/api/Brut/TUI/Events/EventLoopStarted.html +0 -211
data/docs/api/Brut/TUI/Events/Exception.html +0 -523
data/docs/api/Brut/TUI/Events/Tick.html +0 -294
data/docs/api/Brut/TUI/Events.html +0 -131
data/docs/api/Brut/TUI/MarkupString.html +0 -537
data/docs/api/Brut/TUI/Script/BlockStep.html +0 -300
data/docs/api/Brut/TUI/Script/Events/CommandExecutionFailed.html +0 -252
data/docs/api/Brut/TUI/Script/Events/CommandExecutionSucceeded.html +0 -163
data/docs/api/Brut/TUI/Script/Events/CommandStdErr.html +0 -163
data/docs/api/Brut/TUI/Script/Events/CommandStdOut.html +0 -300
data/docs/api/Brut/TUI/Script/Events/ExecutingCommand.html +0 -298
data/docs/api/Brut/TUI/Script/Events/Message.html +0 -345
data/docs/api/Brut/TUI/Script/Events/PhaseCompleted.html +0 -229
data/docs/api/Brut/TUI/Script/Events/PhaseStarted.html +0 -350
data/docs/api/Brut/TUI/Script/Events/ScriptCompleted.html +0 -282
data/docs/api/Brut/TUI/Script/Events/ScriptStarted.html +0 -343
data/docs/api/Brut/TUI/Script/Events/StepCompleted.html +0 -163
data/docs/api/Brut/TUI/Script/Events/StepStarted.html +0 -346
data/docs/api/Brut/TUI/Script/Events.html +0 -115
data/docs/api/Brut/TUI/Script/ExecStep/ProcessStatusFailed.html +0 -210
data/docs/api/Brut/TUI/Script/ExecStep.html +0 -493
data/docs/api/Brut/TUI/Script/LoggingSubscriber.html +0 -914
data/docs/api/Brut/TUI/Script/PutsSubscriber.html +0 -783
data/docs/api/Brut/TUI/Script/Step.html +0 -313
data/docs/api/Brut/TUI/Script.html +0 -1250
data/docs/api/Brut/TUI/Terminal.html +0 -593
data/docs/api/Brut/TUI/TerminalTheme.html +0 -1403
data/docs/api/Brut/TUI/Themes/Dark.html +0 -706
data/docs/api/Brut/TUI/Themes/Light.html +0 -804
data/docs/api/Brut/TUI/Themes/None.html +0 -218
data/docs/api/Brut/TUI/Themes.html +0 -115
data/docs/api/Brut/TUI.html +0 -129
data/docs/api/Brut.html +0 -341
data/docs/api/Clock.html +0 -603
data/docs/api/ModuleName.html +0 -595
data/docs/api/RichString.html +0 -775
data/docs/api/SemanticLogger/Appender/Async.html +0 -219
data/docs/api/Sequel/Extensions/BrutInstrumentation.html +0 -119
data/docs/api/Sequel/Extensions/BrutMigrations.html +0 -541
data/docs/api/Sequel/Extensions.html +0 -117
data/docs/api/Sequel/Plugins/CreatedAt/InstanceMethods.html +0 -105
data/docs/api/Sequel/Plugins/CreatedAt.html +0 -125
data/docs/api/Sequel/Plugins/ExternalId/ClassMethods.html +0 -207
data/docs/api/Sequel/Plugins/ExternalId/InstanceMethods.html +0 -186
data/docs/api/Sequel/Plugins/ExternalId.html +0 -218
data/docs/api/Sequel/Plugins/FindBang/ClassMethods.html +0 -202
data/docs/api/Sequel/Plugins/FindBang.html +0 -125
data/docs/api/Sequel/Plugins.html +0 -117
data/docs/api/Sequel.html +0 -117
data/docs/api/SpecSupport/Matchers/BeABug.html +0 -143
data/docs/api/_index.html +0 -1964
data/docs/api/class_list.html +0 -54
data/docs/api/css/common.css +0 -1
data/docs/api/css/full_list.css +0 -59
data/docs/api/css/style.css +0 -504
data/docs/api/file.README.html +0 -172
data/docs/api/file_list.html +0 -59
data/docs/api/frames.html +0 -22
data/docs/api/index.html +0 -172
data/docs/api/js/app.js +0 -344
data/docs/api/js/full_list.js +0 -242
data/docs/api/js/jquery.js +0 -4
data/docs/api/method_list.html +0 -5542
data/docs/api/top-level-namespace.html +0 -112
data/docs/assets/02-confirmation-dialog-browser-element-styled.3NEGM20-.png +0 -0
data/docs/assets/02-confirmation-dialog-browser-element.DPsf0xUW.png +0 -0
data/docs/assets/02-confirmation-dialog-browser.DH8ALFO4.png +0 -0
data/docs/assets/02-confirmation-flow.D9gZ0S5U.png +0 -0
data/docs/assets/DevEnvironment.DaFcVfwP.png +0 -0
data/docs/assets/LogoStop.Gb3tDhL1.png +0 -0
data/docs/assets/OverviewMetro.DUS-5fUZ.png +0 -0
data/docs/assets/adrs.md.YglbWtQe.js +0 -1
data/docs/assets/adrs.md.YglbWtQe.lean.js +0 -1
data/docs/assets/ai.md.ChLnvDAX.js +0 -1
data/docs/assets/ai.md.ChLnvDAX.lean.js +0 -1
data/docs/assets/app.B8jAEB7R.js +0 -1
data/docs/assets/assets.md.BEF6Oz6K.js +0 -19
data/docs/assets/assets.md.BEF6Oz6K.lean.js +0 -1
data/docs/assets/basic-form-with-violations.Cv6Y9-Q_.png +0 -0
data/docs/assets/basic-form.DbHnu0oW.png +0 -0
data/docs/assets/brut-js.md.BMz0X1Rz.js +0 -12
data/docs/assets/brut-js.md.BMz0X1Rz.lean.js +0 -1
data/docs/assets/business-logic.md.DbuaOYGU.js +0 -1
data/docs/assets/business-logic.md.DbuaOYGU.lean.js +0 -1
data/docs/assets/chunks/@localSearchIndexroot.DJ8mocCj.js +0 -1
data/docs/assets/chunks/VPLocalSearchBox.gF-Po_fz.js +0 -8
data/docs/assets/chunks/framework.C4nOkCZI.js +0 -18
data/docs/assets/chunks/theme.BjPAOJkz.js +0 -2
data/docs/assets/cli.md.DDMar_51.js +0 -122
data/docs/assets/cli.md.DDMar_51.lean.js +0 -1
data/docs/assets/components.md.Ber8UBM0.js +0 -96
data/docs/assets/components.md.Ber8UBM0.lean.js +0 -1
data/docs/assets/configuration.md.DrJ6YVoZ.js +0 -78
data/docs/assets/configuration.md.DrJ6YVoZ.lean.js +0 -1
data/docs/assets/css.md.K5rOCOQY.js +0 -21
data/docs/assets/css.md.K5rOCOQY.lean.js +0 -1
data/docs/assets/custom-element-tests.md.DiLe-eFw.js +0 -69
data/docs/assets/custom-element-tests.md.DiLe-eFw.lean.js +0 -1
data/docs/assets/database-access.md.Dc8l2Plf.js +0 -63
data/docs/assets/database-access.md.Dc8l2Plf.lean.js +0 -1
data/docs/assets/database-schema.md.BJ_JhXmO.js +0 -70
data/docs/assets/database-schema.md.BJ_JhXmO.lean.js +0 -1
data/docs/assets/deployment.md.CHTx2eTR.js +0 -55
data/docs/assets/deployment.md.CHTx2eTR.lean.js +0 -1
data/docs/assets/dev-env-protocol.DysDAtnz.png +0 -0
data/docs/assets/dev-environment.md.B1S9p5ZK.js +0 -16
data/docs/assets/dev-environment.md.B1S9p5ZK.lean.js +0 -1
data/docs/assets/dir-structure.md.D1T2kGwj.js +0 -46
data/docs/assets/dir-structure.md.D1T2kGwj.lean.js +0 -1
data/docs/assets/doc-conventions.md.CDnWaEFg.js +0 -1
data/docs/assets/doc-conventions.md.CDnWaEFg.lean.js +0 -1
data/docs/assets/end-to-end-tests.md.BJJdNDYL.js +0 -28
data/docs/assets/end-to-end-tests.md.BJJdNDYL.lean.js +0 -1
data/docs/assets/features.md.BDWxnyNO.js +0 -154
data/docs/assets/features.md.BDWxnyNO.lean.js +0 -1
data/docs/assets/flash-and-session.md.CUsMxoNl.js +0 -79
data/docs/assets/flash-and-session.md.CUsMxoNl.lean.js +0 -1
data/docs/assets/form-constraints.md.KlfXSKm2.js +0 -90
data/docs/assets/form-constraints.md.KlfXSKm2.lean.js +0 -1
data/docs/assets/forms.md.RK0zkhm0.js +0 -64
data/docs/assets/forms.md.RK0zkhm0.lean.js +0 -1
data/docs/assets/getting-started.md.CGJ44juQ.js +0 -31
data/docs/assets/getting-started.md.CGJ44juQ.lean.js +0 -1
data/docs/assets/handlers.md.C5tUwmmo.js +0 -54
data/docs/assets/handlers.md.C5tUwmmo.lean.js +0 -1
data/docs/assets/hooks.md.CoiYCKRc.js +0 -80
data/docs/assets/hooks.md.CoiYCKRc.lean.js +0 -1
data/docs/assets/i18n.md.DxkCKhUw.js +0 -23
data/docs/assets/i18n.md.DxkCKhUw.lean.js +0 -1
data/docs/assets/index.md.DnphWyQd.js +0 -1
data/docs/assets/index.md.DnphWyQd.lean.js +0 -1
data/docs/assets/initial-home-page.DNIaYmgP.png +0 -0
data/docs/assets/instrumentation.md.BcxjC4jd.js +0 -90
data/docs/assets/instrumentation.md.BcxjC4jd.lean.js +0 -1
data/docs/assets/javascript.md.D6fxhaQb.js +0 -31
data/docs/assets/javascript.md.D6fxhaQb.lean.js +0 -1
data/docs/assets/jobs.md.Bi3qb3v6.js +0 -25
data/docs/assets/jobs.md.Bi3qb3v6.lean.js +0 -1
data/docs/assets/keyword-injection.md.CqLnnzIz.js +0 -21
data/docs/assets/keyword-injection.md.CqLnnzIz.lean.js +0 -1
data/docs/assets/layouts.md.HEbeK7Jr.js +0 -68
data/docs/assets/layouts.md.HEbeK7Jr.lean.js +0 -1
data/docs/assets/lsp.md.bE9dW8n9.js +0 -1
data/docs/assets/lsp.md.bE9dW8n9.lean.js +0 -1
data/docs/assets/markdown-examples.md.BPmtHlc-.js +0 -33
data/docs/assets/markdown-examples.md.BPmtHlc-.lean.js +0 -1
data/docs/assets/middleware.md.BhOIsg59.js +0 -20
data/docs/assets/middleware.md.BhOIsg59.lean.js +0 -1
data/docs/assets/new-post-editor.DrHr-5oh.png +0 -0
data/docs/assets/new-post-home-page.Bm34lyMg.png +0 -0
data/docs/assets/overview.md.BpWAgPFH.js +0 -1
data/docs/assets/overview.md.BpWAgPFH.lean.js +0 -1
data/docs/assets/pages.md.B3sQXpEd.js +0 -45
data/docs/assets/pages.md.B3sQXpEd.lean.js +0 -1
data/docs/assets/recipes_alternate-layouts.md.C1QzVkA7.js +0 -22
data/docs/assets/recipes_alternate-layouts.md.C1QzVkA7.lean.js +0 -1
data/docs/assets/recipes_authentication.md.CyvoIW82.js +0 -157
data/docs/assets/recipes_authentication.md.CyvoIW82.lean.js +0 -1
data/docs/assets/recipes_custom-flash.md.6gFqf2uL.js +0 -26
data/docs/assets/recipes_custom-flash.md.6gFqf2uL.lean.js +0 -1
data/docs/assets/recipes_dev-env-secrets.md.DC_jVY9U.js +0 -12
data/docs/assets/recipes_dev-env-secrets.md.DC_jVY9U.lean.js +0 -1
data/docs/assets/recipes_form-errors.md.B5ptSzMO.js +0 -66
data/docs/assets/recipes_form-errors.md.B5ptSzMO.lean.js +0 -1
data/docs/assets/recipes_indexed-forms.md.BYYQGW2C.js +0 -74
data/docs/assets/recipes_indexed-forms.md.BYYQGW2C.lean.js +0 -1
data/docs/assets/recipes_migrations.md.Cid7-3cu.js +0 -97
data/docs/assets/recipes_migrations.md.Cid7-3cu.lean.js +0 -1
data/docs/assets/recipes_text-field-component.md.VhOsCtKI.js +0 -101
data/docs/assets/recipes_text-field-component.md.VhOsCtKI.lean.js +0 -1
data/docs/assets/roadmap.md.DqC1Y7Zt.js +0 -1
data/docs/assets/roadmap.md.DqC1Y7Zt.lean.js +0 -1
data/docs/assets/routes.md.C1dgIBtD.js +0 -21
data/docs/assets/routes.md.C1dgIBtD.lean.js +0 -1
data/docs/assets/security.md.Jn4SY1uK.js +0 -1
data/docs/assets/security.md.Jn4SY1uK.lean.js +0 -1
data/docs/assets/seed-data.md.UZW0WxYN.js +0 -14
data/docs/assets/seed-data.md.UZW0WxYN.lean.js +0 -1
data/docs/assets/spa.qejUdp-5.png +0 -0
data/docs/assets/space-time-continuum.md.D9rYGDFH.js +0 -1
data/docs/assets/space-time-continuum.md.D9rYGDFH.lean.js +0 -1
data/docs/assets/style.B1z60PPQ.css +0 -1
data/docs/assets/styled-form-with-server-side-violations.Bjxd8Dpv.png +0 -0
data/docs/assets/styled-form-with-violations.Bv_sa9tg.png +0 -0
data/docs/assets/styled-home-page-with-posts.Dd4kG89D.png +0 -0
data/docs/assets/styled-home-page.BzdI7dWz.png +0 -0
data/docs/assets/tutorial.md.BX6f6l00.js +0 -27
data/docs/assets/tutorial.md.BX6f6l00.lean.js +0 -1
data/docs/assets/tutorials_01-intro.md.CzZ3kpF_.js +0 -708
data/docs/assets/tutorials_01-intro.md.CzZ3kpF_.lean.js +0 -1
data/docs/assets/tutorials_02-dialog.md.DE5WfCXI.js +0 -274
data/docs/assets/tutorials_02-dialog.md.DE5WfCXI.lean.js +0 -1
data/docs/assets/unit-tests.md.vDsdBbO_.js +0 -13
data/docs/assets/unit-tests.md.vDsdBbO_.lean.js +0 -1
data/docs/assets/welcome-to-brut.VSWzl17-.png +0 -0
data/docs/assets/why.md.4WpxdrQ2.js +0 -1
data/docs/assets/why.md.4WpxdrQ2.lean.js +0 -1
data/docs/assets/workspace-protocol.C0gXsoDb.png +0 -0
data/docs/assets.html +0 -47
data/docs/brut-css/brut.css +0 -1
data/docs/brut-css/brut.max.css +0 -22372
data/docs/brut-css/classes/appearances.html +0 -783
data/docs/brut-css/classes/background-colors.html +0 -3529
data/docs/brut-css/classes/border-colors.html +0 -3529
data/docs/brut-css/classes/borders.html +0 -2293
data/docs/brut-css/classes/dimensions.html +0 -2581
data/docs/brut-css/classes/flex.html +0 -917
data/docs/brut-css/classes/foreground-colors.html +0 -3261
data/docs/brut-css/classes/junk-drawer.html +0 -431
data/docs/brut-css/classes/layout.html +0 -668
data/docs/brut-css/classes/lists.html +0 -331
data/docs/brut-css/classes/positioning.html +0 -1751
data/docs/brut-css/classes/spacings.html +0 -2633
data/docs/brut-css/classes/typography.html +0 -2206
data/docs/brut-css/customization/advanced-configuration.html +0 -204
data/docs/brut-css/customization/breakpoints.html +0 -227
data/docs/brut-css/customization/design-system.html +0 -197
data/docs/brut-css/customization/pseudo-classes.html +0 -228
data/docs/brut-css/docs.css +0 -98
data/docs/brut-css/getting-started/core-concepts.html +0 -234
data/docs/brut-css/getting-started/installation.html +0 -190
data/docs/brut-css/getting-started/overview.html +0 -210
data/docs/brut-css/getting-started/simple-example.html +0 -285
data/docs/brut-css/index.html +0 -193
data/docs/brut-css/prism-twilight.min.css +0 -1
data/docs/brut-css/properties/colors.html +0 -1548
data/docs/brut-css/properties/spacings.html +0 -614
data/docs/brut-css/properties/typography.html +0 -777
data/docs/brut-js/api/AjaxSubmit.html +0 -452
data/docs/brut-js/api/AjaxSubmit.js.html +0 -550
data/docs/brut-js/api/Autosubmit.html +0 -192
data/docs/brut-js/api/Autosubmit.js.html +0 -114
data/docs/brut-js/api/BaseCustomElement.html +0 -1091
data/docs/brut-js/api/BaseCustomElement.js.html +0 -312
data/docs/brut-js/api/BrutCustomElements.html +0 -172
data/docs/brut-js/api/BufferedLogger.html +0 -173
data/docs/brut-js/api/ConfirmSubmit.html +0 -286
data/docs/brut-js/api/ConfirmSubmit.js.html +0 -188
data/docs/brut-js/api/ConfirmationDialog.html +0 -425
data/docs/brut-js/api/ConfirmationDialog.js.html +0 -194
data/docs/brut-js/api/ConstraintViolationMessage.html +0 -498
data/docs/brut-js/api/ConstraintViolationMessage.js.html +0 -191
data/docs/brut-js/api/ConstraintViolationMessages.html +0 -590
data/docs/brut-js/api/ConstraintViolationMessages.js.html +0 -149
data/docs/brut-js/api/CopyToClipboard.html +0 -345
data/docs/brut-js/api/CopyToClipboard.js.html +0 -147
data/docs/brut-js/api/Form.html +0 -291
data/docs/brut-js/api/Form.js.html +0 -198
data/docs/brut-js/api/I18nTranslation.html +0 -409
data/docs/brut-js/api/I18nTranslation.js.html +0 -115
data/docs/brut-js/api/LocaleDetection.html +0 -312
data/docs/brut-js/api/LocaleDetection.js.html +0 -168
data/docs/brut-js/api/Logger.html +0 -702
data/docs/brut-js/api/Logger.js.html +0 -141
data/docs/brut-js/api/Message.html +0 -238
data/docs/brut-js/api/Message.js.html +0 -113
data/docs/brut-js/api/PrefixedLogger.html +0 -369
data/docs/brut-js/api/RichString.html +0 -1049
data/docs/brut-js/api/RichString.js.html +0 -167
data/docs/brut-js/api/Tabs.html +0 -295
data/docs/brut-js/api/Tabs.js.html +0 -219
data/docs/brut-js/api/Toast.html +0 -270
data/docs/brut-js/api/Toast.js.html +0 -153
data/docs/brut-js/api/Tracing.html +0 -277
data/docs/brut-js/api/Tracing.js.html +0 -298
data/docs/brut-js/api/external-CustomElementRegistry.html +0 -140
data/docs/brut-js/api/external-Performance.html +0 -138
data/docs/brut-js/api/external-Promise.html +0 -138
data/docs/brut-js/api/external-ValidityState.html +0 -138
data/docs/brut-js/api/external-Window.html +0 -233
data/docs/brut-js/api/external-fetch.html +0 -138
data/docs/brut-js/api/global.html +0 -400
data/docs/brut-js/api/index.html +0 -168
data/docs/brut-js/api/index.js.html +0 -184
data/docs/brut-js/api/module-testing.html +0 -383
data/docs/brut-js/api/scripts/linenumber.js +0 -25
data/docs/brut-js/api/scripts/prettify/Apache-License-2.0.txt +0 -202
data/docs/brut-js/api/scripts/prettify/lang-css.js +0 -2
data/docs/brut-js/api/scripts/prettify/prettify.js +0 -28
data/docs/brut-js/api/styles/jsdoc-default.css +0 -327
data/docs/brut-js/api/styles/prettify-jsdoc.css +0 -111
data/docs/brut-js/api/styles/prettify-tomorrow.css +0 -132
data/docs/brut-js/api/testing.AssetMetadata.html +0 -172
data/docs/brut-js/api/testing.AssetMetadataLoader.html +0 -171
data/docs/brut-js/api/testing.CustomElementTest.html +0 -679
data/docs/brut-js/api/testing.DOMCreator.html +0 -171
data/docs/brut-js/api/testing_AssetMetadata.js.html +0 -86
data/docs/brut-js/api/testing_AssetMetadataLoader.js.html +0 -76
data/docs/brut-js/api/testing_CustomElementTest.js.html +0 -286
data/docs/brut-js/api/testing_DOMCreator.js.html +0 -96
data/docs/brut-js/api/testing_index.js.html +0 -99
data/docs/brut-js.html +0 -40
data/docs/business-logic.html +0 -29
data/docs/cli.html +0 -150
data/docs/components.html +0 -124
data/docs/configuration.html +0 -106
data/docs/css.html +0 -49
data/docs/custom-element-tests.html +0 -97
data/docs/database-access.html +0 -91
data/docs/database-schema.html +0 -98
data/docs/deployment.html +0 -83
data/docs/dev-environment.html +0 -44
data/docs/dir-structure.html +0 -74
data/docs/doc-conventions.html +0 -29
data/docs/end-to-end-tests.html +0 -56
data/docs/favicon.ico +0 -0
data/docs/features.html +0 -182
data/docs/flash-and-session.html +0 -107
data/docs/form-constraints.html +0 -118
data/docs/forms.html +0 -92
data/docs/getting-started.html +0 -59
data/docs/handlers.html +0 -82
data/docs/hashmap.json +0 -1
data/docs/hooks.html +0 -108
data/docs/i18n.html +0 -51
data/docs/index.html +0 -29
data/docs/instrumentation.html +0 -118
data/docs/javascript.html +0 -59
data/docs/jobs.html +0 -53
data/docs/keyword-injection.html +0 -49
data/docs/layouts.html +0 -96
data/docs/lsp.html +0 -29
data/docs/markdown-examples.html +0 -61
data/docs/middleware.html +0 -48
data/docs/overview.html +0 -29
data/docs/pages.html +0 -73
data/docs/recipes/alternate-layouts.html +0 -50
data/docs/recipes/authentication.html +0 -185
data/docs/recipes/custom-flash.html +0 -54
data/docs/recipes/dev-env-secrets.html +0 -40
data/docs/recipes/form-errors.html +0 -94
data/docs/recipes/indexed-forms.html +0 -102
data/docs/recipes/migrations.html +0 -125
data/docs/recipes/text-field-component.html +0 -129
data/docs/roadmap.html +0 -29
data/docs/routes.html +0 -49
data/docs/security.html +0 -29
data/docs/seed-data.html +0 -42
data/docs/space-time-continuum.html +0 -29
data/docs/tutorial.html +0 -55
data/docs/tutorials/01-intro.html +0 -736
data/docs/tutorials/02-dialog.html +0 -302
data/docs/unit-tests.html +0 -41
data/docs/vp-icons.css +0 -1
data/docs/why.html +0 -29
data/docs-todo.md +0 -32
data/dx/bash_customizations +0 -6
data/dx/build +0 -73
data/dx/build.pre +0 -15
data/dx/docker-compose.env +0 -22
data/dx/dx.sh.lib +0 -24
data/dx/exec +0 -75
data/dx/setupkit.sh.lib +0 -144
data/dx/show-help-in-app-container-then-wait.sh +0 -38
data/lib/brut/cli/app.rb +0 -238
data/lib/brut/cli/app_runner.rb +0 -252
data/lib/brut/cli/command.rb +0 -258
data/lib/brut/cli/execution_results.rb +0 -119
data/lib/brut/front_end/layouts/_internal.html.erb +0 -68
data/lib/brut/front_end/pages/_missing_page.html.erb +0 -17
data/mkbrut/.gitignore +0 -16
data/mkbrut/CODE_OF_CONDUCT.txt +0 -100
data/mkbrut/Gemfile +0 -3
data/mkbrut/Gemfile.lock +0 -20
data/mkbrut/LICENSE.txt +0 -370
data/mkbrut/README.md +0 -145
data/mkbrut/Rakefile +0 -2
data/mkbrut/bin/build +0 -36
data/mkbrut/bin/ci +0 -19
data/mkbrut/bin/docs +0 -19
data/mkbrut/bin/publish +0 -129
data/mkbrut/bin/rake +0 -16
data/mkbrut/bin/setup +0 -30
data/mkbrut/brut-welcome.png +0 -0
data/mkbrut/deploy/.dockerignore +0 -2
data/mkbrut/deploy/Dockerfile +0 -25
data/mkbrut/dx +0 -1
data/mkbrut/exe/mkbrut +0 -5
data/mkbrut/lib/mkbrut/app_name.rb +0 -29
data/mkbrut/lib/mkbrut/app_options.rb +0 -36
data/mkbrut/lib/mkbrut/cli.rb +0 -189
data/mkbrut/lib/mkbrut/erb_binding_delegate.rb +0 -20
data/mkbrut/lib/mkbrut/ops.rb +0 -17
data/mkbrut/lib/mkbrut/organization.rb +0 -5
data/mkbrut/lib/mkbrut/segments.rb +0 -8
data/mkbrut/lib/mkbrut/version.rb +0 -3
data/mkbrut/lib/mkbrut.rb +0 -20
data/mkbrut/mkbrut.gemspec +0 -34
data/mkbrut/templates/Base/app/src/front_end/images/LogoPylon.png +0 -0
data/mkbrut/templates/Base/bin/build-assets +0 -7
data/mkbrut/templates/Base/bin/ci +0 -39
data/mkbrut/templates/Base/bin/db +0 -9
data/mkbrut/templates/Base/bin/scaffold +0 -9
data/mkbrut/templates/Base/bin/setup +0 -287
data/mkbrut/templates/Base/bin/test +0 -9
data/mkbrut/templates/Base/bin/test-server +0 -29
data/mkbrut/templates/Base/dx/prune +0 -19
data/mkbrut/templates/Base/dx/start +0 -30
data/mkbrut/templates/Base/dx/stop +0 -23
data/mkbrut/templates/segments/Heroku/deploy/heroku_config.rb +0 -27
data/specs/brut/front_end/forms/input.spec.rb +0 -978
data/specs/brut/front_end/forms/radio_button_group_input.spec.rb +0 -54
data/specs/brut/front_end/forms/select_input.spec.rb +0 -54
data/specs/brut/instrumentation/methods.spec.rb +0 -399
data/specs/brut/junk_drawer.spec.rb +0 -79
data/specs/brut/tui/ansi_escape_code.spec.rb +0 -30
data/specs/brut/tui/event_loop.spec.rb +0 -70
data/specs/brut/tui/events/base_event.spec.rb +0 -26
data/specs/brut/tui/events/event_bus.spec.rb +0 -141
data/specs/brut/tui/events/exception.spec.rb +0 -19
data/specs/brut/tui/events/test_event.rb +0 -5
data/specs/spec_helper.rb +0 -31
data/specs/support/matchers/have_constraint_violation.rb +0 -23
data/specs/support/matchers.rb +0 -5
data/specs/support.rb +0 -3
/data/{mkbrut/lib/mkbrut → lib/brut/cli/apps/new}/prefixed_io.rb +0 -0
/data/{mkbrut/templates → templates}/Base/.dockerignore +0 -0
/data/{mkbrut/templates → templates}/Base/.env.development.erb +0 -0
/data/{mkbrut/templates → templates}/Base/.env.test.erb +0 -0
/data/{mkbrut/templates → templates}/Base/.gitignore +0 -0
/data/{mkbrut/templates → templates}/Base/.projections.json +0 -0
/data/{mkbrut/templates → templates}/Base/Dockerfile.dx +0 -0
/data/{mkbrut/templates → templates}/Base/Gemfile.erb +0 -0
/data/{mkbrut/templates → templates}/Base/Procfile.development +0 -0
/data/{mkbrut/templates → templates}/Base/Procfile.test +0 -0
/data/{mkbrut/templates → templates}/Base/README.md +0 -0
/data/{mkbrut/templates → templates}/Base/README.md.erb +0 -0
/data/{mkbrut/templates → templates}/Base/app/bootstrap.rb +0 -0
/data/{mkbrut/templates → templates}/Base/app/config/i18n/en/1_defaults.rb +0 -0
/data/{mkbrut/templates → templates}/Base/app/config/i18n/en/2_app.rb +0 -0
/data/{mkbrut/templates → templates}/Base/app/public/static/manifest.json.erb +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/app.rb.erb +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/back_end/data_models/app_data_model.rb +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/back_end/data_models/db.rb +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/back_end/data_models/migrations/20240101130000_citext.rb +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/back_end/data_models/seed/seed_data.rb +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/components/app_component.rb +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/components/custom_element_registration.rb.erb +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/css/index.css +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/css/svgs.css +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/forms/app_form.rb +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/handlers/app_handler.rb +0 -0
/data/{brutrb.com → templates/Base/app/src/front_end}/images/LogoPylon.png +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/images/LogoTransit.png +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/images/apple-touch-icon-120x120.png +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/images/apple-touch-icon-152x152.png +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/images/apple-touch-icon-167x167.png +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/images/apple-touch-icon-180x180.png +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/images/favicon.ico +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/images/icon.png +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/images/mkicons.sh +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/js/index.js +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/layouts/blank_layout.rb +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/layouts/default_layout.rb.erb +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/pages/app_page.rb +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/pages/home_page.rb +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/support/app_session.rb +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/svgs/README.md +0 -0
/data/{mkbrut/templates → templates}/Base/app/src/front_end/svgs/comment-button.svg +0 -0
/data/{mkbrut/templates → templates}/Base/bin/README.md.erb +0 -0
/data/{mkbrut/templates → templates}/Base/bin/console +0 -0
/data/{mkbrut/templates → templates}/Base/bin/dbconsole +0 -0
/data/{mkbrut/templates → templates}/Base/bin/dev +0 -0
/data/{mkbrut/templates → templates}/Base/bin/run +0 -0
/data/{mkbrut/templates → templates}/Base/bin/run.run +0 -0
/data/{mkbrut/templates → templates}/Base/bin/startup-message +0 -0
/data/{mkbrut/templates → templates}/Base/config.ru +0 -0
/data/{mkbrut/templates → templates}/Base/docker-compose.dx.yml +0 -0
/data/{mkbrut/templates → templates}/Base/dx/README.md +0 -0
/data/{mkbrut/templates → templates}/Base/dx/bash_customizations +0 -0
/data/{mkbrut/templates → templates}/Base/dx/bash_customizations.local +0 -0
/data/{mkbrut/templates → templates}/Base/dx/build +0 -0
/data/{mkbrut/templates → templates}/Base/dx/dx.sh.lib +0 -0
/data/{mkbrut/templates → templates}/Base/dx/exec +0 -0
/data/{dx → templates/Base/dx}/prune +0 -0
/data/{mkbrut/templates → templates}/Base/dx/show-help-in-app-container-then-wait.sh +0 -0
/data/{dx → templates/Base/dx}/start +0 -0
/data/{dx → templates/Base/dx}/stop +0 -0
/data/{mkbrut/templates → templates}/Base/package.json.erb +0 -0
/data/{mkbrut/templates → templates}/Base/puma.config.rb +0 -0
/data/{mkbrut/templates → templates}/Base/specs/e2e/home_page.spec.rb.erb +0 -0
/data/{mkbrut/templates → templates}/Base/specs/front_end/js/SpecHelper.js +0 -0
/data/{mkbrut/templates → templates}/Base/specs/front_end/pages/home_page.spec.rb +0 -0
/data/{mkbrut/templates → templates}/Base/specs/lint_factories.spec.rb +0 -0
/data/{mkbrut/templates → templates}/Base/specs/spec_helper.rb +0 -0
/data/{mkbrut/templates → templates}/Base/specs/support.rb +0 -0
/data/{mkbrut/templates → templates}/segments/BareBones/app/src/front_end/handlers/trigger_exception_handler.rb +0 -0
/data/{mkbrut/templates → templates}/segments/BareBones/app/src/front_end/js/Example.js.erb +0 -0
/data/{mkbrut/templates → templates}/segments/BareBones/specs/front_end/handlers/trigger_exception_handler.spec.rb +0 -0
/data/{mkbrut/templates → templates}/segments/BareBones/specs/front_end/js/Example.spec.js.erb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/app/src/back_end/data_models/db/guestbook_message.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/app/src/back_end/data_models/migrations/20250628194124_guestbook.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/components/flash_component.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/css/constraint-violations.css +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/fonts/monaspace-xenon.ttf +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/forms/guestbook_message_form.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/handlers/guestbook_message_handler.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/pages/guestbook_page/message_component.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/pages/guestbook_page.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/app/src/front_end/pages/new_guestbook_message_page.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/specs/back_end/data_models/db/guestbook_message.spec.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/specs/e2e/guest_message.spec.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/specs/factories/db/guestbook_message.factory.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/specs/front_end/components/flash_component.spec.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/specs/front_end/handlers/guestbook_message_handler.spec.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/specs/front_end/pages/guestbook_page/message_component.spec.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/specs/front_end/pages/guestbook_page.spec.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Demo/specs/front_end/pages/new_guestbook_message_page.spec.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Heroku/bin/deploy +0 -0
/data/{mkbrut/templates → templates}/segments/Heroku/deploy/docker-entrypoint +0 -0
/data/{mkbrut/templates → templates}/segments/Sidekiq/app/boot_sidekiq.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Sidekiq/app/config/sidekiq.yml +0 -0
/data/{mkbrut/templates → templates}/segments/Sidekiq/app/src/back_end/jobs/app_job.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Sidekiq/app/src/back_end/jobs/example_job.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Sidekiq/app/src/back_end/segments/sidekiq_segment.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Sidekiq/bin/run.sidekiq +0 -0
/data/{mkbrut/templates → templates}/segments/Sidekiq/specs/back_end/jobs/example_job.spec.rb +0 -0
/data/{mkbrut/templates → templates}/segments/Sidekiq/specs/integration/sidekiq_works.spec.rb +0 -0

data/docs/brut-css/classes/background-colors.html DELETED Viewed

@@ -1,3529 +0,0 @@
-<!doctype html>
-<html class="ma-0 pa-0 h-100" lang="en">
-  <head>
-  <link rel="stylesheet" href="/brut-css/brut.css">
-  <link rel="stylesheet" href="/brut-css/docs.css">
-  <link rel="stylesheet" href="/brut-css/prism-twilight.min.css">
-</head>
-    <body class="flex flex-column ff-sans ma-0 pa-0 h-100">
-    <header class="pos-sticky top-0 bg-gray-700 pa-3 z-5 shadow-2">
-      <div class="flex gap-3 justify-between items-center">
-        <h1><a href="/brut-css" class="black tdn">BrutCSS Reference Documentation</a></h1>
-        <ul class="lst-none pl-0 flex gap-2 justify-end items-center">
-          <form class="dn flex items-center gap-1 mr-3">
-            <label>
-            <input type="search" placeholder="e.g. padding-left" class="pa-2 br-2 ba bc-gray-600 bg-white-ish gray-200">
-            <span class="sr-only">Search term</span>
-            </label>
-            <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">
-              <span class="mr-2">Search</span>
-              <kbd>&#8984;</kbd>
-              <kbd>/</kbd>
-            </button>
-          </form>
-          <li><a href="/" class="red-200 tdn hover-tdu">BrutRB</a></li>
-          <span aria-hidden="true">&middot;</span>
-          <li><a href="/brut-js" class="gray-200 tdn hover-tdu">BrutJS</a></li>
-          <span aria-hidden="true">&middot;</span>
-          <li><a href="https://github.com/thirdtank/brut/tree/main/brut-css" class="gray-200 tdn hover-tdu">Code</a></li>
-        </ul>
-      </div>
-    </header>
-    <main class="flex overflow-hidden flex-grow-1 flex-shrink-1 flex-basis-0 pos-relative">
-      <nav class="overflow-y-auto ph-3 pb-2 pt-4 w-20 bg-gray-800 gray-200 h-100">
-  <h3>Getting Started</h3>
-  <ul class="pl-3">
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/overview.html">Overview</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/installation.html">Installation</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/core-concepts.html">Core Concepts</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/simple-example.html">Simple Example</a>
-      </li>
-  </ul>
-  <h3>Properties</h3>
-  <ul class="pl-3">
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/colors.html">Colors</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/spacings.html">Spacings</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/typography.html">Typography</a>
-      </li>
-  </ul>
-  <h3>Classes</h3>
-  <ul class="pl-3">
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/appearances.html">Appearances</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/borders.html">Borders</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/foreground-colors.html">Foreground Colors</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/background-colors.html">Background Colors</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/border-colors.html">Border Colors</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/dimensions.html">Dimensions</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/flex.html">Flex</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/layout.html">Layout</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/lists.html">Lists</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/positioning.html">Positioning</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/spacings.html">Spacings</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/typography.html">Typography</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/junk-drawer.html">Junk Drawer</a>
-      </li>
-  </ul>
-  <h3>Customization</h3>
-  <ul class="pl-3">
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/design-system.html">Design System</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/breakpoints.html">Breakpoints</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/pseudo-classes.html">Pseudo Classes</a>
-      </li>
-      <li>
-        <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/advanced-configuration.html">Advanced Configuration</a>
-      </li>
-  </ul>
-      </nav>
-      <section class="overflow-y-auto pt-4 h-100 flex-grow-1 flex-shrink-1 flex-basis-0 flex flex-column">
-        <div class="ph-3 pv-2 flex items-start gap-2 justify-between">
-  <article>
-    <h2 class="}-5">Background Colors Classes</h2>
-      <p>Background colors.  For red, orange, yellow, green, blue, purple, and gray, there are nine steps in the scale, from 100 being darkest to 900 being lightest.  Black and white have only two steps: pure black/white and slightly off black/white.  The colors and shades are shown in the table below.</p>
-      <div class="pa-3 inset-shadow-1 br-3 mb-3">
-<table class="collapse">
-  <thead>
-    <tr>
-      <th role="none"></th>
-        <th class="pa-2 tc ff-mono">100</th>
-        <th class="pa-2 tc ff-mono">200</th>
-        <th class="pa-2 tc ff-mono">300</th>
-        <th class="pa-2 tc ff-mono">400</th>
-        <th class="pa-2 tc ff-mono">500</th>
-        <th class="pa-2 tc ff-mono">600</th>
-        <th class="pa-2 tc ff-mono">700</th>
-        <th class="pa-2 tc ff-mono">800</th>
-        <th class="pa-2 tc ff-mono">900</th>
-    </tr>
-  </thead>
-  <tr>
-    <th class="pa-2 tr ff-mono">Red</th>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-red-100">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-red-200">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-red-300">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-red-400">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-red-500">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-red-600">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-red-700">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-red-800">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-red-900">&nbsp;</div></td>
-  </tr>
-  <tr>
-    <th class="pa-2 tr ff-mono">Orange</th>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-orange-100">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-orange-200">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-orange-300">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-orange-400">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-orange-500">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-orange-600">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-orange-700">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-orange-800">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-orange-900">&nbsp;</div></td>
-  </tr>
-  <tr>
-    <th class="pa-2 tr ff-mono">Yellow</th>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-yellow-100">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-yellow-200">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-yellow-300">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-yellow-400">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-yellow-500">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-yellow-600">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-yellow-700">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-yellow-800">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-yellow-900">&nbsp;</div></td>
-  </tr>
-  <tr>
-    <th class="pa-2 tr ff-mono">Green</th>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-green-100">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-green-200">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-green-300">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-green-400">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-green-500">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-green-600">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-green-700">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-green-800">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-green-900">&nbsp;</div></td>
-  </tr>
-  <tr>
-    <th class="pa-2 tr ff-mono">Blue</th>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-blue-100">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-blue-200">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-blue-300">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-blue-400">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-blue-500">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-blue-600">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-blue-700">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-blue-800">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-blue-900">&nbsp;</div></td>
-  </tr>
-  <tr>
-    <th class="pa-2 tr ff-mono">Purple</th>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-purple-100">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-purple-200">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-purple-300">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-purple-400">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-purple-500">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-purple-600">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-purple-700">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-purple-800">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-purple-900">&nbsp;</div></td>
-  </tr>
-  <tr>
-    <th class="pa-2 tr ff-mono">Gray</th>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-gray-100">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-gray-200">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-gray-300">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-gray-400">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-gray-500">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-gray-600">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-gray-700">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-gray-800">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-gray-900">&nbsp;</div></td>
-  </tr>
-    <thead>
-      <tr>
-        <th role="none"></th>
-        <th class="pa-2 tc"><em class="fw-normal">pure</em></th>
-        <th class="pa-2 tc ff-mono">-ish</th>
-      </tr>
-    </thead>
-  <tr>
-    <th class="pa-2 tr ff-mono">Black</th>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-black">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3  bg-black-ish">&nbsp;</div></td>
-  </tr>
-  <tr>
-    <th class="pa-2 tr ff-mono">White</th>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-white">&nbsp;</div></td>
-    <td class="pa-2"><div class="br-3 w-4 h-3 ba bc-gray-700 bg-white-ish">&nbsp;</div></td>
-  </tr>
-</table>
-</div>
-      <h3 class="f-2 b">See Also</h3>
-      <ul class="see-also">
-          <li><p><a href="/brut-css/properties/colors.html">Colors</a></p>
-</li>
-      </ul>
-      <h3 class="f-5 mt-4" id="class-scale:background-red">Red</h3>
-      <p class="p">
-        <p>Red shades.</p>
-      </p>
-        <h4 class="f-2 b">See Also</h3>
-        <ul class="see-also">
-            <li><p><a href="/brut-css/properties/colors.html#property-scale:red">Red</a></p>
-</li>
-        </ul>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-red-100">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-red-100</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-red-100</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Red at weight 100 (darkest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-red-100 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-red-100
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-red-100 pa-2">
-<code class="">
-.bg-red-100
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-red-200">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-red-200</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-red-200</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Red at weight 200 (second darkest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-red-200 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-red-200
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-red-200 pa-2">
-<code class="">
-.bg-red-200
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-red-300">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-red-300</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-red-300</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Red at weight 300.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-red-300 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-red-300
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-red-300 pa-2">
-<code class="">
-.bg-red-300
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-red-400">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-red-400</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-red-400</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Red at weight 400.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-red-400 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-red-400
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-red-400 pa-2">
-<code class="">
-.bg-red-400
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-red-500">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-red-500</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-red-500</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Red at weight 500.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-red-500 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-red-500
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-red-500 pa-2">
-<code class="">
-.bg-red-500
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-red-600">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-red-600</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-red-600</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Red at weight 600 ().</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-red-600 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-red-600
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-red-600 pa-2">
-<code class="">
-.bg-red-600
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-red-700">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-red-700</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-red-700</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Red at weight 700 ().</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-red-700 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-red-700
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-red-700 pa-2">
-<code class="">
-.bg-red-700
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-red-800">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-red-800</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-red-800</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Red at weight 800 (second lightest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-red-800 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-red-800
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-red-800 pa-2">
-<code class="">
-.bg-red-800
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-red-900">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-red-900</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-red-900</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Red at weight 900 (lightest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-red-900 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-red-900
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-red-900 pa-2">
-<code class="">
-.bg-red-900
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-      <h3 class="f-5 mt-4" id="class-scale:background-orange">Orange</h3>
-      <p class="p">
-        <p>Orange shades.</p>
-      </p>
-        <h4 class="f-2 b">See Also</h3>
-        <ul class="see-also">
-            <li><p><a href="/brut-css/properties/colors.html#property-scale:orange">Orange</a></p>
-</li>
-        </ul>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-orange-100">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-orange-100</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-orange-100</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Orange at weight 100 (darkest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-orange-100 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-orange-100
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-orange-100 pa-2">
-<code class="">
-.bg-orange-100
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-orange-200">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-orange-200</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-orange-200</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Orange at weight 200 (second darkest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-orange-200 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-orange-200
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-orange-200 pa-2">
-<code class="">
-.bg-orange-200
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-orange-300">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-orange-300</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-orange-300</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Orange at weight 300.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-orange-300 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-orange-300
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-orange-300 pa-2">
-<code class="">
-.bg-orange-300
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-orange-400">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-orange-400</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-orange-400</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Orange at weight 400.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-orange-400 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-orange-400
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-orange-400 pa-2">
-<code class="">
-.bg-orange-400
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-orange-500">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-orange-500</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-orange-500</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Orange at weight 500.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-orange-500 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-orange-500
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-orange-500 pa-2">
-<code class="">
-.bg-orange-500
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-orange-600">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-orange-600</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-orange-600</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Orange at weight 600 ().</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-orange-600 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-orange-600
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-orange-600 pa-2">
-<code class="">
-.bg-orange-600
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-orange-700">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-orange-700</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-orange-700</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Orange at weight 700 ().</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-orange-700 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-orange-700
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-orange-700 pa-2">
-<code class="">
-.bg-orange-700
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-orange-800">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-orange-800</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-orange-800</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Orange at weight 800 (second lightest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-orange-800 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-orange-800
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-orange-800 pa-2">
-<code class="">
-.bg-orange-800
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-orange-900">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-orange-900</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-orange-900</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Orange at weight 900 (lightest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-orange-900 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-orange-900
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-orange-900 pa-2">
-<code class="">
-.bg-orange-900
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-      <h3 class="f-5 mt-4" id="class-scale:background-yellow">Yellow</h3>
-      <p class="p">
-        <p>Yellow shades.</p>
-      </p>
-        <h4 class="f-2 b">See Also</h3>
-        <ul class="see-also">
-            <li><p><a href="/brut-css/properties/colors.html#property-scale:yellow">Yellow</a></p>
-</li>
-        </ul>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-yellow-100">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-yellow-100</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-yellow-100</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Yellow at weight 100 (darkest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-yellow-100 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-yellow-100
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-yellow-100 pa-2">
-<code class="">
-.bg-yellow-100
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-yellow-200">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-yellow-200</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-yellow-200</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Yellow at weight 200 (second darkest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-yellow-200 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-yellow-200
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-yellow-200 pa-2">
-<code class="">
-.bg-yellow-200
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-yellow-300">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-yellow-300</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-yellow-300</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Yellow at weight 300.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-yellow-300 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-yellow-300
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-yellow-300 pa-2">
-<code class="">
-.bg-yellow-300
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-yellow-400">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-yellow-400</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-yellow-400</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Yellow at weight 400.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-yellow-400 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-yellow-400
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-yellow-400 pa-2">
-<code class="">
-.bg-yellow-400
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-yellow-500">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-yellow-500</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-yellow-500</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Yellow at weight 500.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-yellow-500 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-yellow-500
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-yellow-500 pa-2">
-<code class="">
-.bg-yellow-500
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-yellow-600">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-yellow-600</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-yellow-600</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Yellow at weight 600 ().</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-yellow-600 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-yellow-600
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-yellow-600 pa-2">
-<code class="">
-.bg-yellow-600
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-yellow-700">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-yellow-700</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-yellow-700</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Yellow at weight 700 ().</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-yellow-700 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-yellow-700
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-yellow-700 pa-2">
-<code class="">
-.bg-yellow-700
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-yellow-800">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-yellow-800</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-yellow-800</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Yellow at weight 800 (second lightest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-yellow-800 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-yellow-800
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-yellow-800 pa-2">
-<code class="">
-.bg-yellow-800
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-yellow-900">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-yellow-900</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-yellow-900</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Yellow at weight 900 (lightest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-yellow-900 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-yellow-900
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-yellow-900 pa-2">
-<code class="">
-.bg-yellow-900
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-      <h3 class="f-5 mt-4" id="class-scale:background-green">Green</h3>
-      <p class="p">
-        <p>Green shades.</p>
-      </p>
-        <h4 class="f-2 b">See Also</h3>
-        <ul class="see-also">
-            <li><p><a href="/brut-css/properties/colors.html#property-scale:green">Green</a></p>
-</li>
-        </ul>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-green-100">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-green-100</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-green-100</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Green at weight 100 (darkest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-green-100 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-green-100
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-green-100 pa-2">
-<code class="">
-.bg-green-100
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-green-200">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-green-200</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-green-200</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Green at weight 200 (second darkest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-green-200 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-green-200
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-green-200 pa-2">
-<code class="">
-.bg-green-200
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-green-300">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-green-300</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-green-300</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Green at weight 300.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-green-300 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-green-300
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-green-300 pa-2">
-<code class="">
-.bg-green-300
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-green-400">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-green-400</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-green-400</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Green at weight 400.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-green-400 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-green-400
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-green-400 pa-2">
-<code class="">
-.bg-green-400
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-green-500">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-green-500</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-green-500</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Green at weight 500.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-green-500 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-green-500
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-green-500 pa-2">
-<code class="">
-.bg-green-500
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-green-600">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-green-600</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-green-600</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Green at weight 600 ().</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-green-600 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-green-600
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-green-600 pa-2">
-<code class="">
-.bg-green-600
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-green-700">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-green-700</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-green-700</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Green at weight 700 ().</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-green-700 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-green-700
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-green-700 pa-2">
-<code class="">
-.bg-green-700
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-green-800">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-green-800</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-green-800</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Green at weight 800 (second lightest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-green-800 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-green-800
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-green-800 pa-2">
-<code class="">
-.bg-green-800
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-green-900">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-green-900</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-green-900</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Green at weight 900 (lightest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-green-900 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-green-900
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-green-900 pa-2">
-<code class="">
-.bg-green-900
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-      <h3 class="f-5 mt-4" id="class-scale:background-blue">Blue</h3>
-      <p class="p">
-        <p>Blue shades.</p>
-      </p>
-        <h4 class="f-2 b">See Also</h3>
-        <ul class="see-also">
-            <li><p><a href="/brut-css/properties/colors.html#property-scale:blue">Blue</a></p>
-</li>
-        </ul>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-blue-100">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-blue-100</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-blue-100</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Blue at weight 100 (darkest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-blue-100 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-blue-100
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-blue-100 pa-2">
-<code class="">
-.bg-blue-100
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-blue-200">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-blue-200</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-blue-200</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Blue at weight 200 (second darkest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-blue-200 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-blue-200
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-blue-200 pa-2">
-<code class="">
-.bg-blue-200
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-blue-300">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-blue-300</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-blue-300</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Blue at weight 300.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-blue-300 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-blue-300
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-blue-300 pa-2">
-<code class="">
-.bg-blue-300
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-blue-400">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-blue-400</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-blue-400</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Blue at weight 400.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-blue-400 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-blue-400
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-blue-400 pa-2">
-<code class="">
-.bg-blue-400
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-blue-500">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-blue-500</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-blue-500</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Blue at weight 500.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-blue-500 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-blue-500
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-blue-500 pa-2">
-<code class="">
-.bg-blue-500
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-blue-600">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-blue-600</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-blue-600</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Blue at weight 600 ().</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-blue-600 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-blue-600
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-blue-600 pa-2">
-<code class="">
-.bg-blue-600
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-blue-700">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-blue-700</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-blue-700</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Blue at weight 700 ().</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-blue-700 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-blue-700
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-blue-700 pa-2">
-<code class="">
-.bg-blue-700
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-blue-800">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-blue-800</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-blue-800</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Blue at weight 800 (second lightest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-blue-800 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-blue-800
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-blue-800 pa-2">
-<code class="">
-.bg-blue-800
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-blue-900">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-blue-900</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-blue-900</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Blue at weight 900 (lightest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-blue-900 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-blue-900
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-blue-900 pa-2">
-<code class="">
-.bg-blue-900
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-      <h3 class="f-5 mt-4" id="class-scale:background-purple">Purple</h3>
-      <p class="p">
-        <p>Purple shades.</p>
-      </p>
-        <h4 class="f-2 b">See Also</h3>
-        <ul class="see-also">
-            <li><p><a href="/brut-css/properties/colors.html#property-scale:purple">Purple</a></p>
-</li>
-        </ul>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-purple-100">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-purple-100</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-purple-100</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Purple at weight 100 (darkest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-purple-100 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-purple-100
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-purple-100 pa-2">
-<code class="">
-.bg-purple-100
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-purple-200">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-purple-200</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-purple-200</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Purple at weight 200 (second darkest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-purple-200 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-purple-200
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-purple-200 pa-2">
-<code class="">
-.bg-purple-200
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-purple-300">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-purple-300</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-purple-300</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Purple at weight 300.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-purple-300 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-purple-300
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-purple-300 pa-2">
-<code class="">
-.bg-purple-300
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-purple-400">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-purple-400</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-purple-400</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Purple at weight 400.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-purple-400 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-purple-400
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-purple-400 pa-2">
-<code class="">
-.bg-purple-400
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-purple-500">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-purple-500</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-purple-500</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Purple at weight 500.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-purple-500 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-purple-500
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-purple-500 pa-2">
-<code class="">
-.bg-purple-500
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-purple-600">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-purple-600</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-purple-600</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Purple at weight 600 ().</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-purple-600 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-purple-600
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-purple-600 pa-2">
-<code class="">
-.bg-purple-600
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-purple-700">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-purple-700</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-purple-700</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Purple at weight 700 ().</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-purple-700 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-purple-700
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-purple-700 pa-2">
-<code class="">
-.bg-purple-700
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-purple-800">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-purple-800</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-purple-800</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Purple at weight 800 (second lightest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-purple-800 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-purple-800
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-purple-800 pa-2">
-<code class="">
-.bg-purple-800
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-purple-900">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-purple-900</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-purple-900</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--purple-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Purple at weight 900 (lightest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-purple-900 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-purple-900
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-purple-900 pa-2">
-<code class="">
-.bg-purple-900
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-      <h3 class="f-5 mt-4" id="class-scale:background-gray">Gray</h3>
-      <p class="p">
-        <p>Gray shades.</p>
-      </p>
-        <h4 class="f-2 b">See Also</h3>
-        <ul class="see-also">
-            <li><p><a href="/brut-css/properties/colors.html#property-scale:gray">Gray</a></p>
-</li>
-        </ul>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-gray-100">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-gray-100</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-gray-100</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-100<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Gray at weight 100 (darkest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-gray-100 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-gray-100
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-gray-100 pa-2">
-<code class="">
-.bg-gray-100
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-gray-200">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-gray-200</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-gray-200</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-200<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Gray at weight 200 (second darkest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-gray-200 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-gray-200
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-gray-200 pa-2">
-<code class="">
-.bg-gray-200
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-gray-300">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-gray-300</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-gray-300</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-300<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Gray at weight 300.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-gray-300 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-gray-300
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-gray-300 pa-2">
-<code class="">
-.bg-gray-300
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-gray-400">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-gray-400</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-gray-400</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-400<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Gray at weight 400.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-gray-400 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-gray-400
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-gray-400 pa-2">
-<code class="">
-.bg-gray-400
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-gray-500">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-gray-500</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-gray-500</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-500<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Gray at weight 500.</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-gray-500 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-gray-500
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-gray-500 pa-2">
-<code class="">
-.bg-gray-500
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-gray-600">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-gray-600</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-gray-600</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-600<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Gray at weight 600 ().</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-gray-600 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-gray-600
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-gray-600 pa-2">
-<code class="">
-.bg-gray-600
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-gray-700">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-gray-700</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-gray-700</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-700<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Gray at weight 700 ().</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-gray-700 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-gray-700
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-gray-700 pa-2">
-<code class="">
-.bg-gray-700
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-gray-800">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-gray-800</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-gray-800</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-800<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Gray at weight 800 (second lightest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-gray-800 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-gray-800
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-gray-800 pa-2">
-<code class="">
-.bg-gray-800
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-gray-900">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-gray-900</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-gray-900</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-900<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Gray at weight 900 (lightest).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-gray-900 pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-gray-900
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-gray-900 pa-2">
-<code class="">
-.bg-gray-900
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-      <h3 class="f-5 mt-4" id="class-scale:background-black">Black</h3>
-      <p class="p">
-        <p>Blacks.</p>
-      </p>
-        <h4 class="f-2 b">See Also</h3>
-        <ul class="see-also">
-            <li><p><a href="/brut-css/properties/colors.html#property-scale:black">Black</a></p>
-</li>
-        </ul>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-black">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-black</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-black</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--black<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Black (pure).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-black pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-black
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-black pa-2">
-<code class="">
-.bg-black
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-black-ish">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-black-ish</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-black-ish</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--black-ish<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>Black (slightly off).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white bg-black-ish pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-black-ish
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-white pa-2">
-<div class="white bg-black-ish pa-2">
-<code class="">
-.bg-black-ish
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-      <h3 class="f-5 mt-4" id="class-scale:background-white">White</h3>
-      <p class="p">
-        <p>Whites.</p>
-      </p>
-        <h4 class="f-2 b">See Also</h3>
-        <ul class="see-also">
-            <li><p><a href="/brut-css/properties/colors.html#property-scale:white">White</a></p>
-</li>
-        </ul>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-white">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-white</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-white</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--white<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>White (pure).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-white pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-white
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-white pa-2">
-<code class="">
-.bg-white
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-        <div class="mt-4 flex gap-3 items-center justify-between" id="bg-white-ish">
-          <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-white-ish</code></h4>
-          <pre class="f-3 highlighted-code"><span class="token selector">.bg-white-ish</span> <span class="token punctuation">{</span>
-   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--white-ish<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span></pre>
-        </div>
-        <div class="ml-3">
-        <p class="p">
-          <p>White (slightly off).</p>
-        </p>
-          <h5 class="f-2 ttu">
-              Example
-          </h5>
-            <div class="mv-3 example">
-              <pre class="highlighted-code"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span 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>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black bg-white-ish pa-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-      .bg-white-ish
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre>
-              <div class="example-demonstration">
-<div class="bg-black pa-2">
-<div class="black bg-white-ish pa-2">
-<code class="">
-.bg-white-ish
-</code>
-</div>
-</div>
-              </div>
-            </div>
-        </div>
-  </article>
-  <div class="z-5 ma-0 overflow-y-auto pa-2 w-20 h-100 pos-absolute top-0 right-2">
-    <div class="pa-3 ba bc-gray-700 bg-gray-900 br-3 shadow-1 ridiculous-liquid-glass-is-all-the-rage">
-      <h3>On this Page</h3>
-      <ul class="lst-none ma-0 pa-0">
-        <li class="lh-copy"><a href="#class-scale:background-red">Red</a></li>
-        <li class="lh-copy"><a href="#class-scale:background-orange">Orange</a></li>
-        <li class="lh-copy"><a href="#class-scale:background-yellow">Yellow</a></li>
-        <li class="lh-copy"><a href="#class-scale:background-green">Green</a></li>
-        <li class="lh-copy"><a href="#class-scale:background-blue">Blue</a></li>
-        <li class="lh-copy"><a href="#class-scale:background-purple">Purple</a></li>
-        <li class="lh-copy"><a href="#class-scale:background-gray">Gray</a></li>
-        <li class="lh-copy"><a href="#class-scale:background-black">Black</a></li>
-        <li class="lh-copy"><a href="#class-scale:background-white">White</a></li>
-      </ul>
-    </div>
-  </div>
-        </div>
-      <footer class="bg-black white mt-auto">
-        <p class="tc">
-          Copyright &copy; 2025 David Bryant Copeland.
-        </p>
-      </footer>
-    </section>
-  </main>
-</body>
-</html>