tools/style_variable_generator/templates/css_generator.tmpl

/* Copyright 2020 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */
{%- if not suppress_sources_comment %}

/* This file is generated from:
{%- for path in in_files %}
 *  {{path}}
{%- endfor %}
 */
{%- endif %}
:root {
  color-scheme: light dark;
}
{%- if font_faces %}
{%- for _, value in font_faces.items() %}

@font-face {
  font-family: "{{value.family}}";
  src: local("{{value.local_src}}");
}
{%- endfor %}
{%- endif %}
{% macro render_variables_for_mode(mode) -%}
{%- for model_name, color in colors[mode].items() %}
{%-   if needs_rgb_variant(color) %}
  {{model_name | to_css_var_name}}-rgb: {{color | css_color_rgb}};
{%-   endif %}
  {{model_name | to_css_var_name}}: {{css_color_var(model_name, color, mode)}};
{% endfor %}

{%- for name, value in opacities[mode].items() %}
  {{name | to_css_var_name}}: {{value | css_opacity}};
{%  endfor -%}

{%- for name, color in legacy_mappings[Modes.DEFAULT].items() %}
{%-   if needs_rgb_variant(color) %}
  {{name | to_css_var_name_unscoped}}-rgb: {{color | css_color_rgb}};
{%-   endif %}
  {{name | to_css_var_name_unscoped}}: {{css_color_var(name, color, mode, True)}};
  {{name | to_css_var_name_unscoped}}-light: {{css_color_var(name, color, Modes.LIGHT, True)}};
  {{name | to_css_var_name_unscoped}}-dark: {{css_color_var(name, color, Modes.DARK, True)}};
{%  endfor -%}
{%- endmacro %}
{#
The :not(body) adds extra selector specificity so that these colors 'win'
against paper-styles/color.html.
TODO(crbug.com/40122747): Remove once deprecated colors are removed from
Chrome OS pages.
-#}
html:not(body) {
{{- render_variables_for_mode(Modes.DEFAULT) -}}
}

{%- if font_families or typefaces %}
html {
{%- if font_families %}
  /* font families */
{%-   for name, value in font_families.items() %}
  {{name | to_css_var_name}}: {{value}};
{%-     endfor %}

{%- endif %}


{%- if typefaces %}

  /* typefaces */
{%-   for name, typeface in typefaces.items() %}
  {{name | to_css_var_name}}-font: {{typeface.font_weight}} {{typeface.font_size}}px/{{typeface.line_height}}px {{typeface.font_family | process_simple_ref}};
  {{name | to_css_var_name}}-font-family: {{typeface.font_family | process_simple_ref}};
  {{name | to_css_var_name}}-font-size: {{typeface.font_size}}px;
  {{name | to_css_var_name}}-font-weight: {{typeface.font_weight}};
  {{name | to_css_var_name}}-line-height: {{typeface.line_height}}px;

{%   endfor -%}
{%- endif %}
}
{%- endif %}

{%- if untyped_css %}

html {
{%-   for name, value in untyped_css.items() %}
  {{name | to_css_var_name}}: {{value}};
{%-   endfor %}
}
{%- endif %}

{%- if colors[Modes.DARK] and dark_mode_selector is not none %}

{{dark_mode_selector}} {
{{- render_variables_for_mode(Modes.DARK) -}}
}
{%- elif colors[Modes.DARK] %}

@media (prefers-color-scheme: dark) {
{#-
The :not(body) adds extra selector specificity so that these colors 'win'
against paper-styles/color.html.
TODO(crbug.com/40122747): Remove once deprecated colors are removed from
Chrome OS pages.
#}
html:not(body) {
{{- render_variables_for_mode(Modes.DARK) -}}
}
}
{%- endif %}