ts_generator.tmpl

/* Copyright 2021 The Chromium Authors. All rights reserved.
 * 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() %}
  {{model_name | to_css_var_name}}-rgb: {{color | css_color_rgb}};
  {{model_name | to_css_var_name}}: {{css_color_var(model_name, color)}};
{% 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 {
  /** The html selector the colors should be attached too. */
  target?: 'host' | 'html';
  /**
   * Generate a css dump which sets variables to their dark mode values in light
   * mode and vice versa. If true lockTheme is ignored.
   */
  invert?: boolean;
  /**
   * 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';
}

// 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 group_name, vars in untyped_css.items() %}
  /* {{group_name}} */
{%-     for name, value in vars.items() %}
  {{name | to_css_var_name}}: {{value}};
{%-     endfor %}
{%-   endfor %}
{% endif -%}
` : '';

const TYPOGRAPHY_CSS = window ? `
{%- if typography.font_families or typography.typefaces %}
  /* font families */
{%-   for name, value in typography.font_families.items() %}
  {{name | to_css_var_name}}: {{value}};
{%-     endfor %}

  /* typefaces */
{%-   for name, typeface in typography.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 -%}
` : '';

/**
 * 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) {
  let cssString;
  if (options?.invert) {
    cssString = /* SAFE */ (`
      ${options?.target === 'host' ? ':host' : 'html:not(body)'} {
        ${DEFAULT_CSS}
        ${UNTYPED_CSS}
        ${TYPOGRAPHY_CSS}
        ${DARK_MODE_OVERRIDES_CSS}
      }

      @media (prefers-color-scheme: dark) {
        ${options?.target === 'host' ? ':host' : 'html:not(body)'} {
          ${DEFAULT_CSS}
        }
      }
    `);
  } else if (options?.lockTheme === 'light') {
    // Tag strings which are safe with a special comment so copybara can add
    // the right safety wrappers whem moving this code into Google3.
    cssString = /* SAFE */ (`
      ${options?.target === 'host' ? ':host' : 'html:not(body)'} {
        ${DEFAULT_CSS}
        ${UNTYPED_CSS}
        ${TYPOGRAPHY_CSS}
      }
    `);
  } else if (options?.lockTheme === 'dark') {
    cssString = /* SAFE */ (`
      ${options?.target === 'host' ? ':host' : 'html:not(body)'} {
        ${DEFAULT_CSS}
        ${UNTYPED_CSS}
        ${TYPOGRAPHY_CSS}
        ${DARK_MODE_OVERRIDES_CSS}
      }
    `);
  } else {
    cssString = /* SAFE */ (`
      ${options?.target === 'host' ? ':host' : 'html:not(body)'} {
        ${DEFAULT_CSS}
        ${UNTYPED_CSS}
        ${TYPOGRAPHY_CSS}
      }
      @media (prefers-color-scheme: dark) {
        ${options?.target === 'host' ? ':host' : 'html:not(body)'} {
          ${DARK_MODE_OVERRIDES_CSS}
        }
      }
    `);
  }

  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 group_name, vars in untyped_css.items() %}
{%-     for name, value in vars.items() %}
export const {{name | to_ts_var_name}} = css`var({{name | to_css_var_name}})`;
{%-     endfor %}
{%   endfor %}
{%- endif -%}
{%- if typography.font_families or typography.typefaces %}
{%-   for name, value in typography.font_families.items() %}
export const {{name | to_ts_var_name}} = css`var({{name | to_css_var_name}}-font)`;
{%-     endfor %}
{%-   for name, typeface in typography.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 -%}