blob: 9a490f09680b98c890c0cfd347a60a247298609f [file] [log] [blame]
/* 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 -%}