/* Copyright 2021 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 %}
{% macro render_variables_as_css(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 -%}
{%- endmacro %}
import {css} from 'lit';
{%- if include_style_sheet %}
/* SAFETY_BOILERPLATE */

export interface GetColorsCSSOptions {
  /**
   * Generate a css dump which sets variables to either their dark mode or light
   * mode values and ignores the documents prefers-color-scheme.
   */
  lockTheme?: 'light' | 'dark';
  /**
   * Opt into using material 3 color tokens (see go/cros-tokens). If true any
   * legacy mappings specified in the input json5 files will be added into the
   * document.
   */
  useDynamicColors?: boolean;
}

// Use a ternary expression that can only be evaluated at runtime here to force
// closure to leave these string constants as variables instead of inlining them
// in the below template strings. Not doing this results in a unreasonable file
// size increase. See b/209520919.
const DEFAULT_CSS = window ? `
{{- render_variables_as_css(Modes.DEFAULT) -}}
` : '';

const DARK_MODE_OVERRIDES_CSS = window ? `
{{- render_variables_as_css(Modes.DARK) -}}
` : '';

const UNTYPED_CSS = window ? `
{%- if untyped_css %}
{%-   for name, value in untyped_css.items() %}
  {{name | to_css_var_name}}: {{value}};
{%-   endfor %}
{% endif -%}
` : '';

const TYPOGRAPHY_CSS = window ? `
{%- if font_faces %}
  /* font faces */
{%- for _, value in font_faces.items() %}
  @font-face {
    font-family: "{{value.family}}";
    src: local("{{value.local_src}}");
  }
{%- endfor %}
{% endif %}
{%- if font_families or typefaces %}
  /* font families */
{%-   for name, value in font_families.items() %}
  {{name | to_css_var_name}}: {{value}};
{%-     endfor %}

  /* 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 -%}
` : '';

const LEGACY_MAPPINGS_CSS = window ? `
{%- 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 -%}
` : '';

/**
 * Returns a string containing all semantic colors exported in this file as
 * css variables. This string an be used to construct a stylesheet which can be
 * placed in the dom at runtime, see tools/style_variable_generator/README.md
 * for more info. Ensure the css returned by this function is added to the dom
 * before the rendering of the first element on the page so you are guaranteed
 * that all TS constant references resolve correctly.
 */
export function getColorsCSS(options?: GetColorsCSSOptions) {
  // Tag strings which are safe with a special comment so copybara can add
  // the right safety wrappers whem moving this code into Google3.
  let cssString = /* SAFE */ ("");
{% for lockTheme in ['\'light\'', '\'dark\'', 'undefined'] -%}
{%-   for useDynamicColors in ['true', 'false'] %}
  if (options?.lockTheme === {{lockTheme}} && !!options?.useDynamicColors === {{useDynamicColors}}) {
    cssString = /* SAFE */ (`
      html:not(body), :host {
        ${DEFAULT_CSS}
        ${UNTYPED_CSS}
        ${TYPOGRAPHY_CSS}
{%-       if lockTheme == '\'dark\'' %}
        ${DARK_MODE_OVERRIDES_CSS}
{%-       endif %}
{%-       if useDynamicColors == 'true' %}
        ${LEGACY_MAPPINGS_CSS}
{%-       endif %}
      }
      :host([inverted-colors]) {
{%-       if lockTheme == '\'dark\'' %}
        ${DEFAULT_CSS}
{%-       else %}
        ${DARK_MODE_OVERRIDES_CSS}
{%-       endif %}
      }
{%       if lockTheme == 'undefined' %}
      @media (prefers-color-scheme: dark) {
        html:not(body), :host {
          ${DARK_MODE_OVERRIDES_CSS}
{%-       if useDynamicColors == 'true' %}
          ${LEGACY_MAPPINGS_CSS}
{%-       endif %}
        }
        :host([inverted-colors]) {
          ${DEFAULT_CSS}
        }
      }
{%-       endif %}
    `);
  }
{%-   endfor -%}
{%- endfor %}
  return cssString;
}

{%- endif %}

{% for model_name, color in colors[Modes.DEFAULT].items() -%}
export const {{model_name | to_ts_var_name}} = css`var({{model_name | to_css_var_name}})`;
{% endfor %}

{%- for model_name, value in opacities[Modes.DEFAULT].items() -%}
export const {{model_name | to_ts_var_name}} = css`var({{model_name | to_css_var_name}})`;
{%  endfor -%}
{%- if untyped_css %}
{%   for name, value in untyped_css.items() -%}
export const {{name | to_ts_var_name}} = css`var({{name | to_css_var_name}})`;
{%   endfor -%}
{%- endif -%}
{%- if font_families or typefaces %}
{%-   for name, value in font_families.items() %}
export const {{name | to_ts_var_name}} = css`var({{name | to_css_var_name}})`;
{%-     endfor %}
{%-   for name, typeface in typefaces.items() %}
export const {{name | to_ts_var_name}}_FONT = css`var({{name | to_css_var_name}}-font)`;
export const {{name | to_ts_var_name}}_FONT_FAMILY = css`var({{name | to_css_var_name}}-font-family)`;
export const {{name | to_ts_var_name}}_FONT_SIZE = css`var({{name | to_css_var_name}}-font-size)`;
export const {{name | to_ts_var_name}}_FONT_WEIGHT = css`var({{name | to_css_var_name}}-font-weight)`;
export const {{name | to_ts_var_name}}_LINE_HEIGHT = css`var({{name | to_css_var_name}}-line-height)`;
{%   endfor -%}
{%- endif -%}