From 7e6a9f16532847051bfc72217c201332a1c195d6 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Mon, 17 Oct 2022 10:20:11 +0200
Subject: [PATCH] Remove box shadow for ha-card (#14063)

* Remove box shadow for ha-card

* add raised style in case of raised card needed

* add box-sizing: border-box

* Allow box-shadow theming

* Restore box-shadow theme in date range picker

* Restore hui unused entities card box shadow none

* Apply suggestions from code review

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/components/date-range-picker.ts | 14 +++++++-------
 src/components/ha-card.ts           | 30 +++++++++++++++--------------
 src/html/onboarding.html.template   |  2 +-
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/date-range-picker.ts b/src/components/date-range-picker.ts
index 8cb7610ee1..4eb3d788f7 100644
--- a/src/components/date-range-picker.ts
+++ b/src/components/date-range-picker.ts
@@ -111,14 +111,14 @@ class DateRangePickerElement extends WrappedElement {
           .daterangepicker {
             left: 0px !important;
             top: auto;
+            box-shadow: var(--ha-card-box-shadow, none);
             background-color: var(--card-background-color);
-            border: none;
-            border-radius: var(--ha-card-border-radius, 4px);
-            box-shadow: var(
-              --ha-card-box-shadow,
-              0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-              0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-              0px 1px 3px 0px rgba(0, 0, 0, 0.12)
+            border-radius: var(--ha-card-border-radius, 16px);
+            border-width: var(--ha-card-border-width, 1px);
+            border-style: solid;
+            border-color: var(
+              --ha-card-border-color,
+              var(--divider-color, #e0e0e0)
             );
             color: var(--primary-text-color);
             min-width: initial !important;
diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index a5a6702b5b..1d2fc01f02 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -5,7 +5,7 @@ import { customElement, property } from "lit/decorators";
 export class HaCard extends LitElement {
   @property() public header?: string;
 
-  @property({ type: Boolean, reflect: true }) public outlined = false;
+  @property({ type: Boolean, reflect: true }) public raised = false;
 
   static get styles(): CSSResultGroup {
     return css`
@@ -14,12 +14,14 @@ export class HaCard extends LitElement {
           --ha-card-background,
           var(--card-background-color, white)
         );
-        border-radius: var(--ha-card-border-radius, 4px);
-        box-shadow: var(
-          --ha-card-box-shadow,
-          0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-          0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-          0px 1px 3px 0px rgba(0, 0, 0, 0.12)
+        box-shadow: var(--ha-card-box-shadow, none);
+        box-sizing: border-box;
+        border-radius: var(--ha-card-border-radius, 16px);
+        border-width: var(--ha-card-border-width, 1px);
+        border-style: solid;
+        border-color: var(
+          --ha-card-border-color,
+          var(--divider-color, #e0e0e0)
         );
         color: var(--primary-text-color);
         display: block;
@@ -27,13 +29,13 @@ export class HaCard extends LitElement {
         position: relative;
       }
 
-      :host([outlined]) {
-        box-shadow: none;
-        border-width: var(--ha-card-border-width, 1px);
-        border-style: solid;
-        border-color: var(
-          --ha-card-border-color,
-          var(--divider-color, #e0e0e0)
+      :host([raised]) {
+        border: none;
+        box-shadow: var(
+          --ha-card-box-shadow,
+          0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+          0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+          0px 1px 3px 0px rgba(0, 0, 0, 0.12)
         );
       }
 
diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template
index e6e6891256..351f06ed70 100644
--- a/src/html/onboarding.html.template
+++ b/src/html/onboarding.html.template
@@ -16,7 +16,7 @@
       .content {
         box-sizing: border-box;
         padding: 20px 16px;
-        border-radius: 4px;
+        border-radius: var(--ha-card-border-radius, 16px);
         max-width: 432px;
         margin: 64px auto 0;
         box-shadow: var(