From 2bd5682f535d01296f20faae8a33f6350de2fb57 Mon Sep 17 00:00:00 2001
From: DitwanP <price.ditwan@gmail.com>
Date: Thu, 25 Jan 2024 15:51:42 -0800
Subject: [PATCH 1/4] feat(fab, link): add component tokens

---
 .../src/components/fab/fab.scss               | 23 +++++++++++++------
 .../src/components/link/link.scss             | 13 +++++++++--
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss
index ecdf9684fa9..c266abbd6c9 100755
--- a/packages/calcite-components/src/components/fab/fab.scss
+++ b/packages/calcite-components/src/components/fab/fab.scss
@@ -1,17 +1,26 @@
 :host {
-  @apply flex bg-transparent;
-}
+  @apply flex;
 
-@include disabled();
+  --calcite-fab-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
+  --calcite-fab-shadow-active: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
+  --calcite-fab-shadow-hover: var(--calcite-shadow-md);
+
+  --calcite-fab-offset-shadow: 0 0 #0000;
 
-calcite-button {
-  @apply shadow-2;
+  --calcite-button-box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow),
+    var(--calcite-fab-shadow);
+
+  background-color: var(--calcite-color-transparent);
   &:hover {
-    @apply shadow-2-lg;
+    --calcite-button-box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow),
+      var(--calcite-fab-shadow-hover);
   }
   &:active {
-    @apply shadow-2-sm;
+    --calcite-button-box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow),
+      var(--calcite-fab-shadow-active);
   }
 }
 
+@include disabled();
+
 @include base-component();
diff --git a/packages/calcite-components/src/components/link/link.scss b/packages/calcite-components/src/components/link/link.scss
index 6abf19beb89..0f0ff9c1fdb 100644
--- a/packages/calcite-components/src/components/link/link.scss
+++ b/packages/calcite-components/src/components/link/link.scss
@@ -1,5 +1,14 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-link-text-color: Specifies the text color of the component.
+ */
+
 :host {
   display: inline;
+  --calcite-link-text-color: var(--calcite-color-brand);
 }
 
 // link base
@@ -14,6 +23,7 @@
     justify-center
     rounded-none
     border-none;
+  color: var(--calcite-link-text-color);
   text-decoration: none;
   line-height: inherit;
   font-size: inherit;
@@ -56,8 +66,7 @@ calcite-icon {
 :host {
   span,
   a {
-    @apply text-color-link
-      transition-default
+    @apply transition-default
       relative
       inline
       border-none

From ee90d4be932948f577a602cbd6754cf85ec26153 Mon Sep 17 00:00:00 2001
From: DitwanP <price.ditwan@gmail.com>
Date: Fri, 26 Jan 2024 13:13:23 -0800
Subject: [PATCH 2/4] finish adding tokens for fab and link, and fix end icon
 demo for link.

---
 .../src/components/fab/fab.scss               | 25 ++++++++++++-------
 .../src/components/link/link.scss             |  6 +++++
 .../calcite-components/src/demos/link.html    | 10 ++++----
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss
index c266abbd6c9..51d7060bd70 100755
--- a/packages/calcite-components/src/components/fab/fab.scss
+++ b/packages/calcite-components/src/components/fab/fab.scss
@@ -1,23 +1,30 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-fab-shadow: Specifies the shadow of the component.
+ * @prop --calcite-fab-shadow-hover: Specifies the shadow of the component when in hover state.
+ * @prop --calcite-fab-shadow-active: Specifies the shadow of the component when in active state.
+ */
+
 :host {
   @apply flex;
-
   --calcite-fab-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
   --calcite-fab-shadow-active: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
   --calcite-fab-shadow-hover: var(--calcite-shadow-md);
-
   --calcite-fab-offset-shadow: 0 0 #0000;
+  background-color: var(--calcite-color-transparent);
+}
 
-  --calcite-button-box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow),
-    var(--calcite-fab-shadow);
+calcite-button {
+  box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow), var(--calcite-fab-shadow);
 
-  background-color: var(--calcite-color-transparent);
   &:hover {
-    --calcite-button-box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow),
-      var(--calcite-fab-shadow-hover);
+    box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow), var(--calcite-fab-shadow-hover);
   }
   &:active {
-    --calcite-button-box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow),
-      var(--calcite-fab-shadow-active);
+    box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow), var(--calcite-fab-shadow-active);
   }
 }
 
diff --git a/packages/calcite-components/src/components/link/link.scss b/packages/calcite-components/src/components/link/link.scss
index 0f0ff9c1fdb..312c34a4fba 100644
--- a/packages/calcite-components/src/components/link/link.scss
+++ b/packages/calcite-components/src/components/link/link.scss
@@ -4,11 +4,15 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-link-text-color: Specifies the text color of the component.
+ * @prop --calcite-link-icon-start-color: Specifies the color of the component's start position icon.
+ * @prop --calcite-link-icon-end-color: Specifies the color of the component's end position icon.
  */
 
 :host {
   display: inline;
   --calcite-link-text-color: var(--calcite-color-brand);
+  --calcite-link-icon-start-color: var(--calcite-color-brand);
+  --calcite-link-icon-end-color: var(--calcite-color-brand);
 }
 
 // link base
@@ -57,10 +61,12 @@ calcite-icon {
 // icon positioning and styles
 :host .calcite-link--icon.icon-start {
   margin-inline-end: theme("margin.2");
+  color: var(--calcite-link-icon-start-color);
 }
 
 :host .calcite-link--icon.icon-end {
   margin-inline-start: theme("margin.2");
+  color: var(--calcite-link-icon-end-color);
 }
 
 :host {
diff --git a/packages/calcite-components/src/demos/link.html b/packages/calcite-components/src/demos/link.html
index 250da720904..23b44de96e9 100644
--- a/packages/calcite-components/src/demos/link.html
+++ b/packages/calcite-components/src/demos/link.html
@@ -85,7 +85,7 @@
 
         <div class="child"><calcite-link icon-start="information" class="font-size--2">Link</calcite-link><br /></div>
 
-        <div class="child"><calcite-link icon-start="information" class="font-size--2">Link</calcite-link><br /></div>
+        <div class="child"><calcite-link icon-end="information" class="font-size--2">Link</calcite-link><br /></div>
 
         <div class="child">
           <calcite-link icon-start="information" icon-end="information" class="font-size--2">Link</calcite-link><br />
@@ -102,7 +102,7 @@
 
         <div class="child"><calcite-link icon-start="information" class="font-size--1">Link</calcite-link><br /></div>
 
-        <div class="child"><calcite-link icon-start="information" class="font-size--1">Link</calcite-link><br /></div>
+        <div class="child"><calcite-link icon-end="information" class="font-size--1">Link</calcite-link><br /></div>
 
         <div class="child">
           <calcite-link icon-start="information" icon-end="information" class="font-size--1">Link</calcite-link><br />
@@ -119,7 +119,7 @@
 
         <div class="child"><calcite-link icon-start="information" class="font-size-0">Link</calcite-link><br /></div>
 
-        <div class="child"><calcite-link icon-start="information" class="font-size-0">Link</calcite-link><br /></div>
+        <div class="child"><calcite-link icon-end="information" class="font-size-0">Link</calcite-link><br /></div>
 
         <div class="child">
           <calcite-link icon-start="information" icon-end="information" class="font-size-0">Link</calcite-link><br />
@@ -136,7 +136,7 @@
 
         <div class="child"><calcite-link icon-start="information" class="font-size-1">Link</calcite-link><br /></div>
 
-        <div class="child"><calcite-link icon-start="information" class="font-size-1">Link</calcite-link><br /></div>
+        <div class="child"><calcite-link icon-end="information" class="font-size-1">Link</calcite-link><br /></div>
 
         <div class="child">
           <calcite-link icon-start="information" icon-end="information" class="font-size-1">Link</calcite-link><br />
@@ -153,7 +153,7 @@
 
         <div class="child"><calcite-link icon-start="information" class="font-size-2">Link</calcite-link><br /></div>
 
-        <div class="child"><calcite-link icon-start="information" class="font-size-2">Link</calcite-link><br /></div>
+        <div class="child"><calcite-link icon-end="information" class="font-size-2">Link</calcite-link><br /></div>
 
         <div class="child">
           <calcite-link icon-start="information" icon-end="information" class="font-size-2">Link</calcite-link><br />

From 01ef92d0bd3b910d0cc60a87c62f7cc2e6681fb8 Mon Sep 17 00:00:00 2001
From: DitwanP <price.ditwan@gmail.com>
Date: Fri, 26 Jan 2024 15:05:30 -0800
Subject: [PATCH 3/4] add missing prop info to fab

---
 packages/calcite-components/src/components/fab/fab.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss
index 51d7060bd70..ea19b7d822f 100755
--- a/packages/calcite-components/src/components/fab/fab.scss
+++ b/packages/calcite-components/src/components/fab/fab.scss
@@ -6,6 +6,7 @@
  * @prop --calcite-fab-shadow: Specifies the shadow of the component.
  * @prop --calcite-fab-shadow-hover: Specifies the shadow of the component when in hover state.
  * @prop --calcite-fab-shadow-active: Specifies the shadow of the component when in active state.
+ * @prop --calcite-fab-offset-shadow: Specifies the offset shadow of the component.
  */
 
 :host {

From 58e4c883adfc2ade9227f6542047aa8ffeaed062 Mon Sep 17 00:00:00 2001
From: DitwanP <price.ditwan@gmail.com>
Date: Tue, 13 Feb 2024 11:26:40 -0800
Subject: [PATCH 4/4] Reverting fab changes for splitting PRs for fab and link.

---
 .../src/components/fab/fab.scss               | 29 ++++---------------
 1 file changed, 6 insertions(+), 23 deletions(-)

diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss
index ea19b7d822f..ecdf9684fa9 100755
--- a/packages/calcite-components/src/components/fab/fab.scss
+++ b/packages/calcite-components/src/components/fab/fab.scss
@@ -1,34 +1,17 @@
-/**
- * CSS Custom Properties
- *
- * These properties can be overridden using the component's tag as selector.
- *
- * @prop --calcite-fab-shadow: Specifies the shadow of the component.
- * @prop --calcite-fab-shadow-hover: Specifies the shadow of the component when in hover state.
- * @prop --calcite-fab-shadow-active: Specifies the shadow of the component when in active state.
- * @prop --calcite-fab-offset-shadow: Specifies the offset shadow of the component.
- */
-
 :host {
-  @apply flex;
-  --calcite-fab-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
-  --calcite-fab-shadow-active: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
-  --calcite-fab-shadow-hover: var(--calcite-shadow-md);
-  --calcite-fab-offset-shadow: 0 0 #0000;
-  background-color: var(--calcite-color-transparent);
+  @apply flex bg-transparent;
 }
 
-calcite-button {
-  box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow), var(--calcite-fab-shadow);
+@include disabled();
 
+calcite-button {
+  @apply shadow-2;
   &:hover {
-    box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow), var(--calcite-fab-shadow-hover);
+    @apply shadow-2-lg;
   }
   &:active {
-    box-shadow: var(--calcite-fab-offset-shadow), var(--calcite-fab-offset-shadow), var(--calcite-fab-shadow-active);
+    @apply shadow-2-sm;
   }
 }
 
-@include disabled();
-
 @include base-component();