Remove google colors. Fix #6254 (#6263)

2025-07-17 06:16:33 +00:00 · 2020-06-29 10:51:28 +02:00 · 2020-06-29 10:51:28 +02:00 · e8996063dd
commit e8996063dd
parent 00842a3354
51 changed files with 69 additions and 66 deletions
--- a/demo/src/configs/jimpower/theme.ts
+++ b/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)",
--- a/demo/src/configs/kernehed/theme.ts
+++ b/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",
--- a/hassio/src/addon-view/config/hassio-addon-audio.ts
+++ b/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 {
--- a/hassio/src/addon-view/config/hassio-addon-config.ts
+++ b/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);
        }
      `,
    ];
--- a/hassio/src/addon-view/config/hassio-addon-network.ts
+++ b/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 {
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/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);
-          --mdc-theme-primary: var(--google-red-500);
+          color: var(--error-color);
+          --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 {
--- a/hassio/src/addon-view/log/hassio-addon-logs.ts
+++ b/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;
        }
      `,
--- a/hassio/src/components/hassio-card-content.ts
+++ b/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);
--- a/hassio/src/dashboard/hassio-update.ts
+++ b/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 {
--- a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
+++ b/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;
--- a/hassio/src/system/hassio-host-info.ts
+++ b/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);
        }
      `,
    ];
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/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;
        }
      `,
--- a/hassio/src/system/hassio-supervisor-log.ts
+++ b/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 {
--- a/src/components/buttons/ha-progress-button.js
+++ b/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;
        }

--- a/src/components/ha-climate-control.js
+++ b/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;
--- a/src/components/ha-water_heater-control.js
+++ b/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;
--- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
+++ b/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);
        }
      `,
    ];
--- a/src/dialogs/device-registry-detail/dialog-device-registry-detail.ts
+++ b/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);
        }
      `,
    ];
--- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
+++ b/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>

--- a/src/dialogs/more-info/more-info-controls.js
+++ b/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 {
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/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);
        }

--- a/src/panels/config/areas/dialog-area-registry-detail.ts
+++ b/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);
        }
      `,
    ];
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/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;
--- a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
+++ b/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);
--- a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
+++ b/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);
        }
      `,
    ];
--- a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
+++ b/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;
--- a/src/panels/config/cloud/login/cloud-login.js
+++ b/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;
--- a/src/panels/config/cloud/register/cloud-register.js
+++ b/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;
--- a/src/panels/config/core/ha-config-section-core.js
+++ b/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;
        }

--- a/src/panels/config/entities/dialog-entity-editor.ts
+++ b/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 {
--- a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts
+++ b/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;
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/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"
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
+++ b/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;
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
+++ b/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);
        }
      `,
    ];
--- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts
+++ b/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 {
--- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
+++ b/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 {
--- a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts
+++ b/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 {
--- a/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts
+++ b/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 {
--- a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
+++ b/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);
        }
      `,
    ];
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts
+++ b/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 {
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-node-protection.js
+++ b/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;
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/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;
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/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;
--- a/src/panels/config/server_control/ha-config-server-control.ts
+++ b/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;
        }

--- a/src/panels/developer-tools/service/developer-tools-service.js
+++ b/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>

--- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts
+++ b/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);
      }
    `;
  }
--- a/src/panels/lovelace/cards/hui-plant-status-card.ts
+++ b/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;
      }

--- a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
+++ b/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);
      }
    `;
  }
--- a/src/panels/lovelace/hui-root.ts
+++ b/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);
--- a/src/resources/ha-style.ts
+++ b/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;
--- a/src/resources/styles.ts
+++ b/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);
  }
 `;