Remove google colors. Fix #6254 (#6263)

demo/src/configs/jimpower/theme.ts

@@ -26,9 +26,9 @@ export const demoThemeJimpower = () => ({
   "switch-checked-color": "var(--accent-color)",
   "paper-dialog-background-color": "#434954",
   "secondary-text-color": "#5294E2",
-  "google-red-500": "#E45E65",
+  "error-color": "#E45E65",
   "divider-color": "rgba(0, 0, 0, .12)",
-  "google-green-500": "#39E949",
+  "success-color": "#39E949",
   "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
   "paper-listbox-color": "var(--primary-color)",

demo/src/configs/kernehed/theme.ts

@@ -27,9 +27,9 @@ export const demoThemeKernehed = () => ({
   "switch-checked-color": "var(--accent-color)",
   "paper-dialog-background-color": "#292929",
   "secondary-text-color": "#b58e31",
-  "google-red-500": "#b58e31",
+  "error-color": "#b58e31",
   "divider-color": "rgba(0, 0, 0, .12)",
-  "google-green-500": "#2980b9",
+  "success-color": "#2980b9",
   "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
   "paper-listbox-color": "#777777",

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -107,7 +107,7 @@ class HassioAddonAudio extends LitElement {
           display: block;
         }
         .errors {
-          color: var(--google-red-500);
+          color: var(--error-color);
           margin-bottom: 16px;
         }
         paper-item {

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -84,7 +84,7 @@ class HassioAddonConfig extends LitElement {
           justify-content: space-between;
         }
         .errors {
-          color: var(--google-red-500);
+          color: var(--error-color);
           margin-top: 16px;
         }
         iron-autogrow-textarea {
@@ -92,7 +92,7 @@ class HassioAddonConfig extends LitElement {
           font-family: monospace;
         }
         .syntaxerror {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
       `,
     ];

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -105,7 +105,7 @@ class HassioAddonNetwork extends LitElement {
           display: block;
         }
         .errors {
-          color: var(--google-red-500);
+          color: var(--error-color);
           margin-bottom: 16px;
         }
         .card-actions {

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -560,7 +560,7 @@ class HassioAddonInfo extends LitElement {
           margin-bottom: 16px;
         }
         ha-card.warning {
-          background-color: var(--google-red-500);
+          background-color: var(--error-color);
           color: white;
         }
         ha-card.warning .card-header {
@@ -573,8 +573,8 @@ class HassioAddonInfo extends LitElement {
           --mdc-theme-primary: white !important;
         }
         .warning {
-          color: var(--google-red-500);
+          color: var(--error-color);
-          --mdc-theme-primary: var(--google-red-500);
+          --mdc-theme-primary: var(--error-color);
         }
         .light-color {
           color: var(--secondary-text-color);
@@ -590,7 +590,7 @@ class HassioAddonInfo extends LitElement {
           vertical-align: middle;
         }
         .errors {
-          color: var(--google-red-500);
+          color: var(--error-color);
           margin-bottom: 16px;
         }
         .description {

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -62,7 +62,7 @@ class HassioAddonLogs extends LitElement {
           display: block;
         }
         .errors {
-          color: var(--google-red-500);
+          color: var(--error-color);
           margin-bottom: 16px;
         }
       `,

hassio/src/components/hassio-card-content.ts

@@ -98,7 +98,7 @@ class HassioCardContent extends LitElement {
         color: var(--paper-item-icon-color);
       }
       ha-svg-icon.not_available {
-        color: var(--google-red-500);
+        color: var(--error-color);
       }
       .title {
         color: var(--primary-text-color);

hassio/src/dashboard/hassio-update.ts

@@ -180,7 +180,7 @@ export class HassioUpdate extends LitElement {
           text-align: right;
         }
         .errors {
-          color: var(--google-red-500);
+          color: var(--error-color);
           padding: 16px;
         }
         a {

hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts

@@ -224,7 +224,7 @@ class HassioSnapshotDialog extends LitElement {
         }
         .warning,
         .error {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
         .buttons {
           display: flex;

hassio/src/system/hassio-host-info.ts

@@ -146,7 +146,7 @@ class HassioHostInfo extends LitElement {
           text-align: right;
         }
         .errors {
-          color: var(--google-red-500);
+          color: var(--error-color);
           margin-top: 16px;
         }
         mwc-button.info {
@@ -156,7 +156,7 @@ class HassioHostInfo extends LitElement {
           margin-bottom: 10px;
         }
         .warning {
-          --mdc-theme-primary: var(--google-red-500);
+          --mdc-theme-primary: var(--error-color);
         }
       `,
     ];

hassio/src/system/hassio-supervisor-info.ts

@@ -117,7 +117,7 @@ class HassioSupervisorInfo extends LitElement {
           text-align: right;
         }
         .errors {
-          color: var(--google-red-500);
+          color: var(--error-color);
           margin-top: 16px;
         }
       `,

hassio/src/system/hassio-supervisor-log.ts

@@ -123,7 +123,7 @@ class HassioSupervisorLog extends LitElement {
           width: 96%;
         }
         .errors {
-          color: var(--google-red-500);
+          color: var(--error-color);
           margin-bottom: 16px;
         }
         .card-content {

src/components/buttons/ha-progress-button.js

@@ -22,13 +22,13 @@ class HaProgressButton extends PolymerElement {
 
         .success mwc-button {
           --mdc-theme-primary: white;
-          background-color: var(--google-green-500);
+          background-color: var(--success-color);
           transition: none;
         }
 
         .error mwc-button {
           --mdc-theme-primary: white;
-          background-color: var(--google-red-500);
+          background-color: var(--error-color);
           transition: none;
         }
 

src/components/ha-climate-control.js

@@ -20,7 +20,7 @@ class HaClimateControl extends EventsMixin(PolymerElement) {
           @apply --layout-justified;
         }
         .in-flux#target_temperature {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
         #target_temperature {
           @apply --layout-self-center;

src/components/ha-water_heater-control.js

@@ -20,7 +20,7 @@ class HaWaterHeaterControl extends EventsMixin(PolymerElement) {
           @apply --layout-justified;
         }
         .in-flux#target_temperature {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
         #target_temperature {
           @apply --layout-self-center;

src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts

@@ -180,7 +180,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
         }
 
         .error {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
       `,
     ];

src/dialogs/device-registry-detail/dialog-device-registry-detail.ts

@@ -132,7 +132,7 @@ class DialogDeviceRegistryDetail extends LitElement {
           margin-right: auto;
         }
         .error {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
       `,
     ];

src/dialogs/more-info/controls/more-info-alarm_control_panel.js

@@ -34,7 +34,7 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
           max-width: 200px;
         }
         mwc-button.disarm {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
       </style>
 

src/dialogs/more-info/more-info-controls.js

@@ -64,7 +64,7 @@ class MoreInfoControls extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
 
         mwc-button.warning {
-          --mdc-theme-primary: var(--google-red-500);
+          --mdc-theme-primary: var(--error-color);
         }
 
         :host([domain="camera"]) paper-dialog-scrollable {

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -446,7 +446,7 @@ export class HaVoiceCommandDialog extends LitElement {
         }
 
         .message.error {
-          background-color: var(--google-red-500);
+          background-color: var(--error-color);
           color: var(--text-primary-color);
         }
 

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -157,7 +157,7 @@ class DialogAreaDetail extends LitElement {
           margin-right: auto;
         }
         .error {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
       `,
     ];

src/panels/config/automation/ha-automation-editor.ts

@@ -445,7 +445,7 @@ export class HaAutomationEditor extends LitElement {
         .errors {
           padding: 20px;
           font-weight: bold;
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
         .content {
           padding-bottom: 20px;

src/panels/config/automation/thingtalk/dialog-thingtalk.ts

@@ -257,7 +257,7 @@ class DialogThingtalk extends LitElement {
           display: block;
         }
         .error {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
         .attribution {
           color: var(--secondary-text-color);

src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts

@@ -480,7 +480,7 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
           font-weight: 500;
         }
         .error {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
       `,
     ];

src/panels/config/cloud/forgot-password/cloud-forgot-password.js

@@ -32,7 +32,7 @@ class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) {
           margin: 0;
         }
         .error {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
         .card-actions {
           display: flex;

src/panels/config/cloud/login/cloud-login.js

@@ -52,7 +52,7 @@ class CloudLogin extends LocalizeMixin(
           margin: 0;
         }
         .error {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
         .card-actions {
           display: flex;

src/panels/config/cloud/register/cloud-register.js

@@ -39,7 +39,7 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
         margin: 0;
       }
       .error {
-        color: var(--google-red-500);
+        color: var(--error-color);
       }
       .card-actions {
         display: flex;

src/panels/config/core/ha-config-section-core.js

@@ -27,7 +27,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
         }
 
         .validate-result {
-          color: var(--google-green-500);
+          color: var(--success-color);
           font-weight: 500;
           margin-bottom: 1em;
         }
@@ -37,7 +37,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
         }
 
         .config-invalid .text {
-          color: var(--google-red-500);
+          color: var(--error-color);
           font-weight: 500;
         }
 

src/panels/config/entities/dialog-entity-editor.ts

@@ -292,7 +292,7 @@ export class DialogEntityEditor extends LitElement {
         }
 
         mwc-button.warning {
-          --mdc-theme-primary: var(--google-red-500);
+          --mdc-theme-primary: var(--error-color);
         }
 
         :host([rtl]) app-toolbar {

src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts

@@ -241,10 +241,10 @@ export class EntityRegistrySettingsHelper extends LitElement {
         margin-bottom: -20px;
       }
       mwc-button.warning {
-        --mdc-theme-primary: var(--google-red-500);
+        --mdc-theme-primary: var(--error-color);
       }
       .error {
-        color: var(--google-red-500);
+        color: var(--error-color);
       }
       .row {
         margin-top: 8px;

src/panels/config/entities/ha-config-entities.ts

@@ -180,7 +180,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                 >
                   <ha-icon
                     style=${styleMap({
-                      color: entity.unavailable ? "var(--google-red-500)" : "",
+                      color: entity.unavailable ? "var(--error-color)" : "",
                     })}
                     .icon=${entity.restored
                       ? "hass:restore-alert"

src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts

@@ -227,7 +227,7 @@ class ZHAAddDevicesPage extends LitElement {
           justify-content: center;
         }
         .error {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
         ha-circular-progress {
           padding: 20px;

src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts

@@ -187,7 +187,7 @@ export class ZHAAddGroupPage extends LitElement {
           padding: 8px;
         }
         .paper-dialog-buttons .warning {
-          --mdc-theme-primary: var(--google-red-500);
+          --mdc-theme-primary: var(--error-color);
         }
       `,
     ];

src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts

@@ -290,7 +290,7 @@ export class ZHAClusterAttributes extends LitElement {
         }
 
         .card-actions.warning ha-call-service-button {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
 
         .attribute-picker {

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -222,7 +222,7 @@ export class ZHAClusterCommands extends LitElement {
         }
 
         .card-actions.warning ha-call-service-button {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
 
         .command-picker {

src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts

@@ -166,7 +166,7 @@ export class ZHADeviceBindingControl extends LitElement {
         }
 
         .card-actions.warning ha-call-service-button {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
 
         .command-picker {

src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts

@@ -270,7 +270,7 @@ export class ZHAGroupBindingControl extends LitElement {
         }
 
         .card-actions.warning ha-call-service-button {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
 
         .command-picker {

src/panels/config/integrations/integration-panels/zha/zha-group-page.ts

@@ -325,7 +325,7 @@ export class ZHAGroupPage extends LitElement {
           padding: 8px;
         }
         .paper-dialog-buttons .warning {
-          --mdc-theme-primary: var(--google-red-500);
+          --mdc-theme-primary: var(--error-color);
         }
       `,
     ];

src/panels/config/integrations/integration-panels/zwave/zwave-network.ts

@@ -273,7 +273,7 @@ export class ZwaveNetwork extends LitElement {
         }
 
         .card-actions.warning ha-call-service-button {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
 
         .toggle-help-icon {

src/panels/config/integrations/integration-panels/zwave/zwave-node-protection.js

@@ -14,7 +14,7 @@ class ZwaveNodeProtection extends PolymerElement {
     return html`
     <style include="iron-flex ha-style">
       .card-actions.warning ha-call-api-button {
-        color: var(--google-red-500);
+        color: var(--error-color);
       }
       .content {
         margin-top: 24px;

src/panels/config/scene/ha-scene-editor.ts

@@ -683,7 +683,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
         .errors {
           padding: 20px;
           font-weight: bold;
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
         .content {
           padding-bottom: 20px;

src/panels/config/script/ha-script-editor.ts

@@ -295,7 +295,7 @@ export class HaScriptEditor extends LitElement {
         .errors {
           padding: 20px;
           font-weight: bold;
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
         .content {
           padding-bottom: 20px;

src/panels/config/server_control/ha-config-server-control.ts

@@ -245,7 +245,7 @@ export class HaConfigServerControl extends LitElement {
         }
 
         .validate-result {
-          color: var(--google-green-500);
+          color: var(--success-color);
           font-weight: 500;
           margin-bottom: 1em;
         }
@@ -255,7 +255,7 @@ export class HaConfigServerControl extends LitElement {
         }
 
         .config-invalid .text {
-          color: var(--google-red-500);
+          color: var(--error-color);
           font-weight: 500;
         }
 

src/panels/developer-tools/service/developer-tools-service.js

@@ -81,7 +81,7 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
         }
 
         .error {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
       </style>
 

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -362,7 +362,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
       }
 
       mwc-button#disarm {
-        color: var(--google-red-500);
+        color: var(--error-color);
       }
     `;
   }

src/panels/lovelace/cards/hui-plant-status-card.ts

@@ -229,7 +229,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
       }
 
       .problem {
-        color: var(--google-red-500);
+        color: var(--error-color);
         font-weight: bold;
       }
 

src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts

@@ -104,7 +104,7 @@ export class HuiShoppingListEditor extends LitElement
   static get styles(): CSSResult {
     return css`
       .error {
-        color: var(--google-red-500);
+        color: var(--error-color);
       }
     `;
   }

src/panels/lovelace/hui-root.ts

@@ -698,7 +698,7 @@ class HUIRoot extends LitElement {
           color: var(--text-primary-color, white);
         }
         mwc-button.warning:not([disabled]) {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
         #view {
           min-height: calc(100vh - 112px);

src/resources/ha-style.ts

@@ -34,6 +34,9 @@ documentContainer.innerHTML = `<custom-style>
       --scrollbar-thumb-color: rgb(194, 194, 194);
 
       --error-color: #db4437;
+      --warning-color: f4b400;
+      --success-color: #0f9d58;
+      --info-color: #4285f4;
 
       /* states and badges */
       --state-icon-color: #44739e;

src/resources/styles.ts

@@ -105,15 +105,15 @@ export const haStyle = css`
   }
 
   .error {
-    color: var(--google-red-500);
+    color: var(--error-color);
   }
 
   .warning {
-    color: var(--google-red-500);
+    color: var(--error-color);
   }
 
   mwc-button.warning {
-    --mdc-theme-primary: var(--google-red-500);
+    --mdc-theme-primary: var(--error-color);
   }
 
   button.link {
@@ -132,7 +132,7 @@ export const haStyle = css`
   }
 
   .card-actions .warning {
-    --mdc-theme-primary: var(--google-red-500);
+    --mdc-theme-primary: var(--error-color);
   }
 
   .layout.horizontal,
@@ -247,9 +247,9 @@ export const haStyleDialog = css`
     }
   }
   mwc-button.warning {
-    --mdc-theme-primary: var(--google-red-500);
+    --mdc-theme-primary: var(--error-color);
   }
   .error {
-    color: var(--google-red-500);
+    color: var(--error-color);
   }
 `;