Changes ha-card to new material design rules (#6137)

src/components/ha-card.ts

@@ -12,6 +12,8 @@ import {
 class HaCard extends LitElement {
   @property() public header?: string;
 
+  @property({ type: Boolean, reflect: true }) public outlined = false;
+
   static get styles(): CSSResult {
     return css`
       :host {
@@ -19,12 +21,12 @@ class HaCard extends LitElement {
           --ha-card-background,
           var(--paper-card-background-color, white)
         );
-        border-radius: var(--ha-card-border-radius, 2px);
+        border-radius: var(--ha-card-border-radius, 4px);
         box-shadow: var(
           --ha-card-box-shadow,
-          0 2px 2px 0 rgba(0, 0, 0, 0.14),
+          0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-          0 1px 5px 0 rgba(0, 0, 0, 0.12),
+          0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-          0 3px 1px -2px rgba(0, 0, 0, 0.2)
+          0px 1px 3px 0px rgba(0, 0, 0, 0.12)
         );
         color: var(--primary-text-color);
         display: block;
@@ -32,6 +34,16 @@ class HaCard extends LitElement {
         position: relative;
       }
 
+      :host([outlined]) {
+        box-shadow: 0 0 0 0;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(
+          --ha-card-border-color,
+          var(--divider-color, #e0e0e0)
+        );
+      }
+
       .card-header,
       :host ::slotted(.card-header) {
         color: var(--ha-card-header-color, --primary-text-color);

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

@@ -299,7 +299,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           ${this._showIgnored
             ? ignoredConfigEntries.map(
                 (item: ConfigEntryExtended) => html`
-                  <ha-card class="ignored">
+                  <ha-card outlined class="ignored">
                     <div class="header">
                       ${this.hass.localize(
                         "ui.panel.config.integrations.ignore.ignored"
@@ -335,7 +335,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           ${configEntriesInProgress.length
             ? configEntriesInProgress.map(
                 (flow: DataEntryFlowProgressExtended) => html`
-                  <ha-card class="discovered">
+                  <ha-card outlined class="discovered">
                     <div class="header">
                       ${this.hass.localize(
                         "ui.panel.config.integrations.discovered"
@@ -396,7 +396,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
               )
             : !this._configEntries.length
             ? html`
-                <ha-card>
+                <ha-card outlined>
                   <div class="card-content">
                     <h1>
                       ${this.hass.localize("ui.panel.config.integrations.none")}
@@ -613,7 +613,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           justify-content: space-between;
         }
         .discovered {
-          border: 1px solid var(--primary-color);
+          --ha-card-border-color: var(--primary-color);
         }
         .discovered .header {
           background: var(--primary-color);
@@ -622,7 +622,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           text-align: center;
         }
         .ignored {
-          border: 1px solid var(--light-theme-disabled-color);
+          --ha-card-border-color: var(--light-theme-disabled-color);
         }
         .ignored img {
           filter: grayscale(1);

src/panels/config/integrations/ha-integration-card.ts

@@ -76,7 +76,7 @@ export class HaIntegrationCard extends LitElement {
 
   private _renderGroupedIntegration(): TemplateResult {
     return html`
-      <ha-card class="group">
+      <ha-card outlined class="group">
         <div class="group-header">
           <img
             src="https://brands.home-assistant.io/${this.domain}/icon.png"
@@ -112,6 +112,7 @@ export class HaIntegrationCard extends LitElement {
     const entities = this._getEntities(item);
     return html`
       <ha-card
+        outlined
         class="single integration"
         .configEntry=${item}
         .id=${item.entry_id}

src/panels/lovelace/components/hui-card-options.ts

@@ -109,9 +109,6 @@ export class HuiCardOptions extends LitElement {
       ha-card {
         border-top-right-radius: 0;
         border-top-left-radius: 0;
-        box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
-          rgba(0, 0, 0, 0.12) 0px 1px 5px -4px,
-          rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
       }
 
       div.options {