From 9a3ced8ae998b1c3f7e04ac0e3a633b6480cf189 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Fri, 16 Dec 2022 11:58:52 -0800
Subject: [PATCH 1/4] refactor(modal): Update css variable

BREAKING CHANGE: Removed `--calcite-modal-padding` CSS variable.

- Removed the `--calcite-modal-padding` CSS variable, use the `--calcite-modal-content-padding` CSS variable instead.
---
 src/components/modal/modal.scss | 32 ++++++++++----------------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss
index 70b4d3854e5..8489c671e82 100644
--- a/src/components/modal/modal.scss
+++ b/src/components/modal/modal.scss
@@ -3,7 +3,7 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-modal-padding:Specifies the padding of the modal.
+ * @prop --calcite-modal-content-padding: Specifies the padding of the modal `content` slot.
  * @prop --calcite-scrim-background: The component's semi-transparent background color.
  */
 
@@ -30,10 +30,6 @@
 }
 
 :host([scale="s"]) {
-  --calcite-modal-padding: theme("spacing.3");
-  --calcite-modal-padding-large: theme("spacing.4");
-  --calcite-modal-title-text: theme("fontSize.1h");
-  --calcite-modal-content-text: theme("fontSize.n1");
   --calcite-modal-padding-internal: theme("spacing.3");
   --calcite-modal-padding-large-internal: theme("spacing.4");
   --calcite-modal-title-text-internal: theme("fontSize.1h");
@@ -41,10 +37,6 @@
 }
 
 :host([scale="m"]) {
-  --calcite-modal-padding: theme("spacing.4");
-  --calcite-modal-padding-large: theme("spacing.5");
-  --calcite-modal-title-text: theme("fontSize.2h");
-  --calcite-modal-content-text: theme("fontSize.0");
   --calcite-modal-padding-internal: theme("spacing.4");
   --calcite-modal-padding-large-internal: theme("spacing.5");
   --calcite-modal-title-text-internal: theme("fontSize.2h");
@@ -52,10 +44,6 @@
 }
 
 :host([scale="l"]) {
-  --calcite-modal-padding: theme("spacing.5");
-  --calcite-modal-padding-large: theme("spacing.6");
-  --calcite-modal-title-text: theme("fontSize.3h");
-  --calcite-modal-content-text: theme("fontSize.1");
   --calcite-modal-padding-internal: theme("spacing.5");
   --calcite-modal-padding-large-internal: theme("spacing.6");
   --calcite-modal-title-text-internal: theme("fontSize.3h");
@@ -157,8 +145,8 @@
     border-none
     bg-transparent;
   border-start-end-radius: theme("borderRadius.DEFAULT");
-  padding-block: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));
-  padding-inline: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));
+  padding-block: var(--calcite-modal-padding-internal);
+  padding-inline: var(--calcite-modal-padding-internal);
   flex: 0 0 auto;
   calcite-icon {
     @apply pointer-events-none;
@@ -177,13 +165,13 @@
 .title {
   @apply order-1 flex min-w-0 items-center;
   flex: 1 1 auto;
-  padding-block: var(--calcite-modal-padding, var(--calcite-model-padding-internal));
-  padding-inline: var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal));
+  padding-block: var(--calcite-modal-padding-internal);
+  padding-inline: var(--calcite-modal-padding-large-internal);
 }
 
 @include slotted("header", "*") {
   @apply text-color-1 m-0 font-normal;
-  font-size: var(--calcite-modal-title-text, var(--calcite-modal-title-text-internal));
+  font-size: var(--calcite-modal-title-text-internal);
 }
 
 /**
@@ -192,7 +180,7 @@
 .content {
   @apply bg-foreground-1 relative box-border block h-full overflow-auto p-0;
   max-block-size: calc(100vh - 12rem);
-  padding: var(--calcite-modal-padding);
+  padding-block: var(--calcite-modal-content-padding, ; padding-inline: var(--calcite-modal-padding-internal));
 }
 
 .content--no-footer {
@@ -200,7 +188,7 @@
 }
 
 @include slotted("content", "*") {
-  font-size: var(--calcite-modal-content-text, var(--calcite-modal-context-text-internal));
+  font-size: var(--calcite-modal-context-text-internal);
 }
 
 :host([background-color="grey"]) .content {
@@ -224,8 +212,8 @@
     border-solid
     z-header;
   flex: 0 0 auto;
-  padding-block: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));
-  padding-inline: var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal));
+  padding-block: var(--calcite-modal-padding-internal);
+  padding-inline: var(--calcite-modal-padding-large-internal);
 }
 
 .footer--hide-back .back,

From ac78d8a209657f874b305b6cf2d8c36b3af82e71 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Fri, 16 Dec 2022 12:08:06 -0800
Subject: [PATCH 2/4] Clean up

---
 src/components/modal/modal.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss
index 8489c671e82..ea50619f6de 100644
--- a/src/components/modal/modal.scss
+++ b/src/components/modal/modal.scss
@@ -180,7 +180,6 @@
 .content {
   @apply bg-foreground-1 relative box-border block h-full overflow-auto p-0;
   max-block-size: calc(100vh - 12rem);
-  padding-block: var(--calcite-modal-content-padding, ; padding-inline: var(--calcite-modal-padding-internal));
 }
 
 .content--no-footer {

From cb223dcfd4a19579448bcbec7fa3efabefc78e71 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Fri, 16 Dec 2022 12:08:21 -0800
Subject: [PATCH 3/4] Clean up

---
 src/components/modal/modal.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss
index ea50619f6de..8489c671e82 100644
--- a/src/components/modal/modal.scss
+++ b/src/components/modal/modal.scss
@@ -180,6 +180,7 @@
 .content {
   @apply bg-foreground-1 relative box-border block h-full overflow-auto p-0;
   max-block-size: calc(100vh - 12rem);
+  padding-block: var(--calcite-modal-content-padding, ; padding-inline: var(--calcite-modal-padding-internal));
 }
 
 .content--no-footer {

From cdca0a7de10ea46a20e65627514dc37966044ede Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Fri, 16 Dec 2022 12:18:27 -0800
Subject: [PATCH 4/4] Clean up

---
 src/components/modal/modal.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss
index 8489c671e82..69c7319e2af 100644
--- a/src/components/modal/modal.scss
+++ b/src/components/modal/modal.scss
@@ -180,7 +180,8 @@
 .content {
   @apply bg-foreground-1 relative box-border block h-full overflow-auto p-0;
   max-block-size: calc(100vh - 12rem);
-  padding-block: var(--calcite-modal-content-padding, ; padding-inline: var(--calcite-modal-padding-internal));
+  padding-block: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal));
+  padding-inline: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal));
 }
 
 .content--no-footer {