tree: 5135c7f2f89d55ecad7f03924b8a21593e20ab81 [path history] [tgz]
  1. .style.yapf
  2. DEPS
  3. OWNERS
  4. PRESUBMIT.py
  5. README.md
  6. __init__.py
  7. additional_colors_test.json5
  8. base_generator.py
  9. base_generator_test.py
  10. color.py
  11. color_test.py
  12. colors_test.json5
  13. colors_test_custom_dark_toggle_expected.css
  14. colors_test_dark_only_expected.css
  15. colors_test_expected.css
  16. colors_test_expected.h
  17. colors_test_expected.proto
  18. colors_test_expected.protojson
  19. colors_test_palette.json5
  20. css_generator.py
  21. css_generator.tmpl
  22. find_invalid_css_variables.py
  23. find_invalid_css_variables_test.py
  24. opacity.py
  25. path_overrides.py
  26. presubmit_support.py
  27. proto_generator.py
  28. proto_generator.tmpl
  29. proto_json_generator.tmpl
  30. style_variable_generator.gni
  31. style_variable_generator.py
  32. style_variable_generator_test.py
  33. views_generator.py
  34. views_generator_h.tmpl
tools/style_variable_generator/README.md

style_variable_generator

This is a python tool that generates cross-platform style variables in order to centralize UI constants.

This script uses third_party/pyjson5 to read input json5 files and then generates various output formats as needed by clients (e.g CSS Variables, preview HTML page).

For input format examples, see the *_test.json5 files which contain up to date illustrations of each feature, as well as expected outputs in the corresponding *_test_expected.* files.

Run python style_variable_generator.py -h for usage details.

Generator Options

CSS

Dark mode selector

--generator-option 'dark_mode_selector=html[dark]'

Replaces the default media query (@media (prefers-color-scheme: dark)) which triggers colors to switch to dark mode with a custom css selector. The example above would produce

html[dark] {
    ...dark mode colors
}

instead of the default

@media (prefers-color-scheme: dark) {
    html:not(body) {
        ... colors
    }
}

This should only be used if you want to generate a stylesheet for testing where you can control the switch to dark/light mode, in production always prefer to use the default behavior which will respect operating system level dark mode switches.