| /* 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', |
| }, |
| 'file-project': { |
| light: '#009dc9', |
| dark: '#67d4ff', |
| }, |
| }, |
| } |
