| /* 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 -%} |