/* Copyright 2022 The Chromium Authors
* Use of this source code is governed by a BSD_style license that can be
* found in the LICENSE file. */
/*
* cros.sys Color Tokens
*
* High level color semantics for ChromeOS.
*/
{
token_namespace: 'cros.sys',
options: {
ColorMappings: {
set_name: 'CrosSys',
},
proto: {
field_name: 'palette_colors',
field_id: 1,
},
},
legacy_mappings: {
'cros-color-primary' : '$cros.sys.on-surface',
'cros-color-secondary' : '$cros.sys.secondary',
'cros-color-prominent' : '$cros.sys.primary',
'cros-color-disabled' : '$cros.sys.disabled',
'cros-text-color-secondary': '$cros.sys.on-surface-variant',
'cros-bg-color' : '$cros.sys.app-base',
'cros-bg-color-elevation-1' : '$cros.sys.base-elevated',
'cros-bg-color-elevation-2' : '$cros.sys.base-elevated',
'cros-bg-color-elevation-3' : '$cros.sys.base-elevated',
'cros-bg-color-elevation-4' : '$cros.sys.base-elevated',
'cros-bg-color-elevation-5' : '$cros.sys.base-elevated',
'cros-bg-color-dropped-elevation1' : '$cros.sys.app-base-shaded',
'cros-bg-color-dropped-elevation2' : '$cros.sys.app-base-shaded',
'cros-ripple-color' : '$cros.sys.hover-on-prominent',
'cros-ripple-color-prominent' : '$cros.sys.ripple-primary',
'cros-separator-color' : '$cros.sys.separator',
'cros-link-color' : '$cros.sys.primary',
'cros-app-scrollbar-color' : '$cros.sys.scrollbar',
'cros-app-scrollbar-color-hover' : '$cros.sys.scrollbar-hover',
'cros-app-shield-color' : '$cros.sys.scrim',
'cros-app-shield20' : '$cros.sys.scrim',
'cros-app-shield40' : '$cros.sys.scrim',
'cros-app-shield60' : '$cros.sys.scrim',
'cros-app-shield80' : '$cros.sys.scrim',
'cros-highlight-color' : '$cros.sys.highlight-shape',
'cros-highlight-color-hover' : '$cros.sys.hover-on-subtle',
'cros-highlight-color-focus' : '$cros.sys.ripple-neutral-on-subtle',
'cros-highlight-color-error' : '$cros.sys.error-container',
'cros-highlight-color-green' : '$cros.sys.success-container',
'cros-highlight-color-red' : '$cros.sys.error-container',
'cros-highlight-color-yellow' : '$cros.sys.warning-container',
'cros-text-highlight-color' : '$cros.sys.highlight-text',
'cros-button-label-color-secondary' : '$cros.sys.on-primary-container',
'cros-button-ripple-color-secondary' : '$cros.sys.ripple-primary',
'cros-highlight-color' : '$cros.sys.primary',
'cros-textfield-background-color' : '$cros.sys.input-field-on-shaded',
'cros-textfield-label-color' : '$cros.sys.on-surface',
'cros-slider-color-active' : '$cros.sys.primary',
'cros-slider-track-color-active': '$cros.sys.highlight-shape',
/** cros.sys.primary-container @ 30% */
'cros-slider-track-color-inactive': 'rgba($cros.sys.disabled.rgb,.3)',
'cros-slider-label-text-color' : '$cros.sys.on-primary',
'cros-slider-color-inactive' : '$cros.sys.disabled',
'cros-switch-knob-color-active' : '$cros.sys.primary',
'cros-switch-knob-color-inactive' : '$cros.sys.surface-variant',
'cros-switch-track-color-active' : '$cros.sys.primary-container',
'cros-switch-track-color-inactive' : '$cros.sys.secondary',
'cros-tooltip-label-color' : '$cros.sys.inverse-on-surface',
'cros-tooltip-background-color' : '$cros.sys.on-surface',
'cros-nudge-label-color' : '$cros.sys.on-primary',
'cros-nudge-icon-color' : '$cros.sys.on-primary',
'cros-nudge-background-color' : '$cros.sys.primary',
'cros-menu-label-color' : '$cros.sys.on-surface',
'cros-menu-icon-color' : '$cros.sys.on-surface',
'cros-menu-shortcut-color' : '$cros.sys.secondary',
'cros-menu-item-background-hover' : '$cros.sys.hover-on-subtle',
'cros-color-positive' : '$cros.sys.success',
'cros-color-warning' : '$cros.sys.warning',
'cros-color-alert' : '$cros.sys.error',
},
colors: {
/* Primary */
/* If this is changed, please also update SampleColorScheme */
primary: {
light: '$cros.ref.primary40',
dark: '$cros.ref.primary80',
generate_per_mode: true,
},
'inverse-primary': {
light: '$cros.ref.primary80',
dark: '$cros.ref.primary40',
},
'on-primary': {
light: '$cros.ref.primary100',
dark: '$cros.ref.primary20',
generate_per_mode: true,
},
'inverse-on-primary': {
light: '$cros.ref.primary20',
dark: '$cros.ref.primary100',
},
/* If this is changed, please also update SampleColorScheme */
'primary-container': {
light: '$cros.ref.primary90',
dark: 'blend(rgba($cros.ref.primary30.rgb, 0.08), $cros.ref.secondary30)',
},
'on-primary-container': {
light: '$cros.ref.primary10',
dark: '$cros.ref.primary90',
},
/* Secondary */
secondary: {
light: '$cros.ref.secondary40',
dark: '$cros.ref.secondary80',
generate_per_mode: true,
},
'on-secondary': {
light: '$cros.ref.secondary100',
dark: '$cros.ref.secondary20',
},
'secondary-container': {
light: '$cros.ref.secondary90',
dark: '$cros.ref.secondary30',
},
'on-secondary-container': {
light: '$cros.ref.secondary10',
dark: '$cros.ref.secondary90',
},
/* Tertiary */
tertiary: {
light: '$cros.ref.tertiary40',
dark: '$cros.ref.tertiary80',
},
'on-tertiary': {
light: '$cros.ref.tertiary100',
dark: '$cros.ref.tertiary20',
},
/* If this is changed, please also update SampleColorScheme */
'tertiary-container': {
light: '$cros.ref.tertiary90',
dark: '$cros.ref.tertiary30',
},
'on-tertiary-container': {
light: '$cros.ref.tertiary10',
dark: '$cros.ref.tertiary90',
},
/* Error */
error: {
light: '$cros.ref.error40',
dark: '$cros.ref.error80',
},
'on-error': {
light: '$cros.ref.error100',
dark: '$cros.ref.error20',
},
'error-container': {
light: '$cros.ref.error90',
dark: '$cros.ref.error30',
},
'on-error-container': {
light: '$cros.ref.error10',
dark: '$cros.ref.error90',
},
'error-highlight': {
light: 'rgba($cros.ref.error40.rgb, 0.30)',
dark: 'rgba($cros.ref.error80.rgb, 0.30)',
},
'inverse-error': {
light: '$cros.ref.error80',
dark: '$cros.ref.error40',
},
'inverse-on-error': {
light: '$cros.ref.error20',
dark: '$cros.ref.error100',
},
/* Neutral */
'surface-variant': {
light: '$cros.ref.neutralvariant90',
dark: '$cros.ref.neutralvariant30',
},
'on-surface-variant': {
light: '$cros.ref.neutralvariant30',
dark: '$cros.ref.neutralvariant80',
generate_per_mode: true,
},
outline: {
light: '$cros.ref.neutralvariant50',
dark: '$cros.ref.neutralvariant60',
},
separator: {
light: 'rgba($cros.ref.neutral10.rgb, 0.14)',
dark: 'rgba($cros.ref.neutral90.rgb, 0.14)',
},
white: {
light: '$cros.ref.neutral100',
dark: '$cros.ref.neutral100',
},
black: {
light: '$cros.ref.neutral0',
dark: '$cros.ref.neutral0',
},
/* Bases */
header: {
light: '$cros.ref.secondary90',
dark: '$cros.ref.secondary12',
},
'header-unfocused': {
light: 'blend(rgba($cros.ref.secondary90.rgb, 0.28), $cros.ref.neutralvariant90)',
dark: 'blend(rgba($cros.ref.secondary12.rgb, 0.6), $cros.ref.neutral25)',
},
'app-base-shaded': {
light: '$cros.ref.neutralvariant95',
dark: '$cros.ref.neutral0',
},
'app-base': {
light: '$cros.ref.neutral99',
dark: '$cros.ref.neutral8',
},
'base-highlight': {
light: 'blend(rgba($cros.ref.primary70.rgb, 0.24), $cros.ref.neutral100)',
dark: 'blend(rgba($cros.ref.primary70.rgb, 0.28), $cros.ref.neutral15)',
},
'on-base-highlight': {
light: 'rgba($cros.ref.primary60.rgb, 0.30)',
dark: 'rgba($cros.ref.neutral0.rgb, 0.32)',
},
'base-elevated': {
light: '$cros.ref.neutralvariant100',
/* In dark mode we layer primary80 @ 11% ontop of neutral80 @ 2% ontop of neutral 10. */
dark: 'blend($cros.ref.primary80, 11%, blend($cros.ref.neutral80, 2%, $cros.ref.neutral10))',
generate_per_mode: true,
},
'system-base': {
light: '$cros.ref.neutralvariant90',
dark: '$cros.ref.neutralvariant0',
},
'system-base-elevated': {
light: 'rgba($cros.sys.surface3.rgb, 0.9)',
dark: 'rgba($cros.sys.surface3.rgb, 0.9)',
},
'system-base-elevated-opaque': {
light: '$cros.sys.surface3',
dark: '$cros.sys.surface3',
},
/* Surfaces */
surface: {
light: '$cros.ref.neutral99',
dark: '$cros.ref.neutral10',
},
surface1: {
light: 'blend(rgba($cros.ref.primary40.rgb, 0.05), $cros.ref.neutral99)',
dark: 'blend(rgba($cros.ref.primary80.rgb, 0.05), $cros.ref.neutral10)',
},
surface2: {
light: 'blend(rgba($cros.ref.primary40.rgb, 0.08), $cros.ref.neutral99)',
dark: 'blend(rgba($cros.ref.primary80.rgb, 0.08), $cros.ref.neutral10)',
},
surface3: {
light: 'blend(rgba($cros.ref.primary40.rgb, 0.11), $cros.ref.neutral99)',
dark: 'blend(rgba($cros.ref.primary80.rgb, 0.11), $cros.ref.neutral10)',
},
surface4: {
light: 'blend(rgba($cros.ref.primary40.rgb, 0.12), $cros.ref.neutral99)',
dark: 'blend(rgba($cros.ref.primary80.rgb, 0.12), $cros.ref.neutral10)',
},
surface5: {
light: 'blend(rgba($cros.ref.primary40.rgb, 0.14), $cros.ref.neutral99)',
dark: 'blend(rgba($cros.ref.primary80.rgb, 0.14), $cros.ref.neutral10)',
},
scrim: {
light: 'rgba($cros.ref.neutralvariant60.rgb, 0.6)',
dark: 'rgba($cros.ref.neutralvariant0.rgb, 0.6)',
},
scrim2: {
light: 'rgba($cros.ref.secondary90.rgb, 0.6)',
dark: 'rgba($cros.ref.secondary30.rgb, 0.48)',
},
'dialog-container': '$cros.sys.base-elevated',
'inverse-surface': {
light: '$cros.ref.neutral20',
dark: '$cros.ref.neutral90',
},
'scrollbar': {
light: 'rgba($cros.ref.neutralvariant60.rgb, 0.6)',
dark: 'rgba($cros.ref.neutralvariant50.rgb, 0.6)',
},
'scrollbar-hover': {
light: 'rgba($cros.ref.neutralvariant30.rgb, 0.6)',
dark: 'rgba($cros.ref.neutralvariant90.rgb, 0.6)',
},
'scrollbar-border': {
light: 'rgba($cros.ref.neutralvariant100.rgb, 0.14)',
dark: 'rgba($cros.ref.neutralvariant0.rgb, 0.14)',
},
'input-field-on-shaded': {
light: '$cros.ref.neutral99',
dark: 'rgba($cros.ref.neutral50.rgb, 0.4)'
},
'input-field-on-base': {
light: '$cros.ref.neutral95',
dark: 'rgba($cros.ref.neutral0.rgb, 0.6)'
},
'system-on-base': {
light: 'rgba($cros.ref.neutralvariant99.rgb, 0.6)',
dark: 'rgba($cros.ref.neutralvariant40.rgb, 0.5)',
},
'system-on-base-opaque': {
light: '$cros.ref.neutralvariant95',
dark: '$cros.ref.neutralvariant30',
},
'system-on-base1': {
light: 'rgba($cros.ref.neutral10.rgb, 0.06)',
dark: 'rgba($cros.ref.neutral99.rgb, 0.10)',
},
'system-primary-container': {
light: '$cros.ref.primary80',
dark: '$cros.ref.primary80',
},
'system-on-primary-container': {
light: '$cros.ref.primary10',
dark: '$cros.ref.primary10',
},
'system-on-primary-container-disabled': 'rgba($cros.sys.system-on-primary-container.rgb, 0.38)',
/* Harmonized colors */
'on-success-container': {
light: '$cros.ref.green30',
dark: '$cros.ref.green90',
},
'success-container': {
light: '$cros.ref.green95',
dark: 'blend(rgba($cros.ref.green95.rgb, 0.20), $black)',
},
'success': {
light: '$cros.ref.green50',
dark: '$cros.ref.green80',
},
'on-warning-container': {
light: '$cros.ref.yellow30',
dark: '$cros.ref.yellow80',
},
'warning-container': {
light: '$cros.ref.yellow90',
dark: 'blend(rgba($cros.ref.yellow90.rgb, 0.20), $black)',
},
'system-on-warning-container': {
light: '$cros.ref.yellow10',
dark: '$cros.ref.yellow10',
},
'system-warning-container': {
light: '$cros.ref.yellow80',
dark: '$cros.ref.yellow80',
},
'system-warning-inverse': {
light: '$cros.ref.yellow10',
dark: '$cros.ref.yellow80',
},
'warning': {
light: '$cros.ref.yellow50',
dark: '$cros.ref.yellow80',
},
'on-error-container': {
light: '$cros.ref.red30',
dark: '$cros.ref.red80',
},
'error-container': {
light: '$cros.ref.red90',
dark: 'blend(rgba($cros.ref.red80.rgb, 0.20), $black)',
},
'error': {
light: '$cros.ref.red50',
dark: '$cros.ref.red80',
},
'system-on-error-container': {
light: '$cros.ref.red10',
dark: '$cros.ref.red10',
},
'system-error-container': {
light: '$cros.ref.red80',
dark: '$cros.ref.red80',
},
'on-progress-container': {
light: '$cros.ref.blue30',
dark: '$cros.ref.blue80',
},
'progress-container': {
light: '$cros.ref.blue90',
dark: 'blend(rgba($cros.ref.blue80.rgb, 0.20), $black)',
},
'progress': {
light: '$cros.ref.blue50',
dark: '$cros.ref.blue80',
},
/* TODO(b/322857277): Delete after migrated. Deprecated harmonized colors */
'on-positive-container': '$cros.sys.on-success-container',
'positive-container': '$cros.sys.success-container',
'positive': '$cros.sys.success',
'system-on-negative-container': '$cros.sys.system-on-error-container',
'system-negative-container': '$cros.sys.system-error-container',
/* Text and icons */
'on-surface': {
light: '$cros.ref.neutral10',
dark: '$cros.ref.neutral90',
generate_per_mode: true,
},
'inverse-on-surface': {
light: '$cros.ref.neutral95',
dark: '$cros.ref.neutral10',
},
'on-surface-bodytext': {
light: '$cros.ref.neutral40',
dark: '$cros.ref.neutral70',
},
'inverse-whiteblack': {
light: '$cros.ref.neutral0',
dark: '$cros.ref.neutral100',
},
'disabled': {
light: 'rgba($cros.sys.on-surface.rgb, 0.38)',
dark: 'rgba($cros.sys.on-surface.rgb, 0.38)',
},
'disabled-opaque': {
light: '$cros.ref.neutralvariant80',
dark: '$cros.ref.neutralvariant30',
},
'disabled-container': 'rgba($cros.sys.on-surface.rgb, 0.12)',
// TODO(b/224402466): Add cros.sys.warning
// TODO(b/224402466): Add cros.sys.success
// These values have a very specific meaning and should never be tinted.
'privacy-indicator': {
light: '#146c2e',
dark: '#37be5f',
},
/* Effects */
'hover-on-prominent': {
light: 'rgba($cros.ref.neutral99.rgb, 0.10)',
dark: 'rgba($cros.ref.neutral10.rgb, 0.06)',
},
'inverse-hover-on-prominent': {
light: 'rgba($cros.ref.neutral10.rgb, 0.06)',
dark: 'rgba($cros.ref.neutral99.rgb, 0.10)',
},
'hover-on-subtle': {
light: 'rgba($cros.ref.neutral10.rgb, 0.06)',
dark: 'rgba($cros.ref.neutral99.rgb, 0.1)',
},
'inverse-hover-on-subtle': {
light: 'rgba($cros.ref.neutral99.rgb, 0.1)',
dark: 'rgba($cros.ref.neutral10.rgb, 0.06)',
},
'ripple-primary': {
light: 'rgba($cros.ref.primary70.rgb, 0.32)',
dark: 'rgba($cros.ref.primary60.rgb, 0.32)',
},
'inverse-ripple-primary': {
light: 'rgba($cros.ref.primary60.rgb, 0.32)',
dark: 'rgba($cros.ref.primary70.rgb, 0.32)',
},
'ripple-neutral-on-prominent': {
light: 'rgba($cros.ref.neutral99.rgb, 0.16)',
dark: 'rgba($cros.ref.neutral10.rgb, 0.08)',
},
'ripple-neutral-on-subtle': {
light: 'rgba($cros.ref.neutral10.rgb, 0.12)',
dark: 'rgba($cros.ref.neutral90.rgb, 0.16)',
},
'inverse-ripple-neutral-on-subtle': {
light: 'rgba($cros.ref.neutral90.rgb, 0.16)',
dark: 'rgba($cros.ref.neutral10.rgb, 0.12)',
},
'highlight-shape': {
light: 'rgba($cros.ref.primary70.rgb, 0.3)',
dark: 'rgba($cros.ref.primary70.rgb, 0.3)',
},
'highlight-text': {
light: 'rgba($cros.ref.primary70.rgb, 0.6)',
dark: 'rgba($cros.ref.primary70.rgb, 0.6)',
},
'system-highlight': {
light: 'rgba($cros.ref.neutral100.rgb, 0.16)',
dark: 'rgba($cros.ref.neutral100.rgb, 0.06)',
},
'system-border': 'rgba($cros.ref.neutral0.rgb, 0.08)',
'system-highlight1': {
light: 'rgba($cros.ref.neutral100.rgb, 0.16)',
dark: 'rgba($cros.ref.neutral100.rgb, 0.06)',
},
'system-border1': {
light: 'rgba($cros.ref.neutral0.rgb, 0.06)',
dark: 'rgba($cros.ref.neutral0.rgb, 0.08)',
},
'focus-ring': {
light: '$cros.ref.primary40',
dark: '$cros.ref.primary80',
},
'inverse-focus-ring': {
light: '$cros.ref.primary80',
dark: '$cros.ref.primary40',
},
'focus-ring-on-primary-container': {
light: '$cros.ref.primary40',
dark: '$cros.ref.primary40',
},
'shadow': {
light: '$cros.ref.neutral30',
dark: '$cros.ref.neutral0',
},
'shadow-ambient': 'rgba($cros.sys.shadow.rgb, 0.2)',
'shadow-key': 'rgba($cros.sys.shadow.rgb, 0.1)',
/* When the button is pressed, we layer the ripple color on top of the hover color to form the pressed color, that's what blend() does here. */
'pressed-on-prominent': 'blend($cros.sys.hover-on-prominent, $cros.sys.ripple-neutral-on-prominent)',
'pressed-on-subtle': 'blend($cros.sys.hover-on-subtle, $cros.sys.ripple-neutral-on-subtle)',
/* Sparkle tokens */
'analog': {
light: '$cros.ref.sparkle-analog70',
dark: '$cros.ref.sparkle-analog30',
},
'analog-variant': {
light: '$cros.ref.sparkle-analog80',
dark: '$cros.ref.sparkle-analog40',
},
'muted': {
light: '$cros.ref.sparkle-muted80',
dark: '$cros.ref.sparkle-muted30',
},
'muted-variant': {
light: '$cros.ref.sparkle-muted90',
dark: '$cros.ref.sparkle-muted40',
},
'complement': {
light: '$cros.ref.sparkle-complement90',
dark: '$cros.ref.sparkle-complement20',
},
'complement-variant': {
light: '$cros.ref.sparkle-complement95',
dark: '$cros.ref.sparkle-complement30',
},
/* Illustration colors. */
'illo.color1': {
light: '$cros.ref.primary40',
dark: '$cros.ref.primary80',
generate_per_mode: true,
},
'illo.color1.1': {
light: '$cros.ref.primary80',
dark: '$cros.ref.secondary40',
generate_per_mode: true,
},
'illo.color1.2': {
light: '$cros.ref.primary90',
dark: '$cros.ref.secondary30',
generate_per_mode: true,
},
'illo.color2': {
light: '$cros.ref.green60',
dark: '$cros.ref.green70',
generate_per_mode: true,
},
'illo.color3': {
light: '$cros.ref.yellow70',
dark: '$cros.ref.yellow80',
generate_per_mode: true,
},
'illo.color4': {
light: '$cros.ref.red60',
dark: '$cros.ref.red60',
generate_per_mode: true,
},
'illo.color5': {
light: '$cros.ref.tertiary70',
dark: '$cros.ref.tertiary40',
generate_per_mode: true,
},
'illo.color6': {
light: '$cros.ref.secondary90',
dark: '$cros.ref.secondary50',
generate_per_mode: true,
},
'illo.base': {
light: '$cros.ref.secondary100',
dark: '$cros.ref.secondary0',
generate_per_mode: true,
},
'illo.secondary': {
light: '$cros.ref.neutralvariant90',
dark: '$cros.ref.neutralvariant40',
generate_per_mode: true,
},
'illo.card.color1' : {
light: '#fce3e0',
dark: '#4d2726',
generate_per_mode: true,
},
'illo.card.on-color1' : {
light: '#a50e0e',
dark: '#f6aea9',
generate_per_mode: true,
},
'illo.card.color2' : {
light: '#fef2cb',
dark: '#443117',
generate_per_mode: true,
},
'illo.card.on-color2' : {
light: '#9b6100',
dark: '#fde293',
generate_per_mode: true,
},
'illo.card.color3' : {
light: '#dcf4e3',
dark: '#16341e',
generate_per_mode: true,
},
'illo.card.on-color3' : {
light: '#0d652d',
dark: '#a8dab5',
generate_per_mode: true,
},
'illo.card.color4' : {
light: '#d6e5fc',
dark: '#20314e',
generate_per_mode: true,
},
'illo.card.on-color4' : {
light: '#185abc',
dark: '#aecbfa',
generate_per_mode: true,
},
'illo.card.color5' : {
light: '#f4e3fe',
dark: '#433355',
generate_per_mode: true,
},
'illo.card.on-color5' : {
light: '#75099b',
dark: '#d7aefb',
generate_per_mode: true,
},
'illo.analog': '$cros.ref.sparkle-analog70',
'illo.muted': '$cros.ref.sparkle-muted80',
'illo.complement': '$cros.ref.sparkle-complement90',
'illo.on-gradient': '$cros.ref.neutral10',
/*
* Some GM2 assets are "elevated" meaning they have slightly different
* colors to improve contrast on their elevated surfaces in dark mode.
* Updating these assets to GM3 poses a issue as they need to render with
* elevated colors when the kJelly flag is OFF but with sys illo tokens when
* the jelly flag is ON. To support this we map sys illo references for
* assets on elevated surfaces to the following elevated sys token set.
* These colors are identical to their non elevated counterparts when the
* jelly flag is ON but when the flag is off they get remapped to the
* correct GM2 eleavted token.
*/
'illo.elevated.color1.1': '$cros.sys.illo.color1.1',
'illo.elevated.color1.2': '$cros.sys.illo.color1.2',
'illo.elevated.base': '$cros.sys.illo.base',
'illo.elevated.secondary': '$cros.sys.illo.secondary',
'illo.on-primary-container': '$cros.sys.on-primary-container',
/*
* Gaming colors
*
* Gaming colors are static values here because they are always in the vibrant
* palette. So, they don't have a direct mapping to ref colors. Placeholder
* colors are in the vibrant palette with a purple seed color.
*/
/* Primary 40 Vibrant */
'gaming-control-button-default': '#a100bc',
/* Primary 50 Vibrant */
'gaming-control-button-hover': '#c900eb',
/* Primary 80 Vibrant */
'gaming-control-button-border-hover': '#f9acff',
'gaming.window-button-border': {
light: 'rgba($cros.sys.black.rgb, .08)',
dark: 'rgba($cros.sys.white.rgb, .08)',
},
/* Icon colors. */
'file-ms-excel': '#16a765',
'file-ms-word': '#4986e7',
'file-ms-ppt': '#ff7637',
'file-site': {
light: '#4758b5',
dark: '#8c9eff',
},
'file-form': {
light: '#7248b9',
dark: '#b48cff',
},
},
}
Codebase Browser
chromium