From 9bfd4e436d2a67028f7ee3ef5aa401885dca1a03 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Tue, 22 Oct 2024 12:50:03 -0700
Subject: [PATCH 1/2] feat(tabs, tab, tab-title, tab-nav): update component
 tokens

---
 packages/calcite-components/.stylelintrc.cjs  |   8 +-
 .../src/components/tab-nav/tab-nav.scss       |  46 +--
 .../src/components/tab-title/tab-title.scss   | 334 ++++++++++--------
 .../src/components/tab/tab.scss               |  13 +-
 .../src/components/tabs/tabs.scss             |  37 +-
 5 files changed, 217 insertions(+), 221 deletions(-)

diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs
index 2e02214db54..0998dad6911 100644
--- a/packages/calcite-components/.stylelintrc.cjs
+++ b/packages/calcite-components/.stylelintrc.cjs
@@ -1,13 +1,7 @@
 // @ts-check
 
 // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT
-const customFunctions = [
-  "get-trailing-text-input-padding",
-  "medium-modular-scale",
-  "modular-scale",
-  "scale-duration",
-  "small-modular-scale"
-];
+const customFunctions = [];
 // ⚠️ END OF AUTO-GENERATED CODE
 
 const scssPatternRules = [
diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.scss b/packages/calcite-components/src/components/tab-nav/tab-nav.scss
index 5c520ed64de..7d0f2b04bc5 100644
--- a/packages/calcite-components/src/components/tab-nav/tab-nav.scss
+++ b/packages/calcite-components/src/components/tab-nav/tab-nav.scss
@@ -1,16 +1,24 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-tab-background-color: Specifies background color of the component.
+ * @prop --calcite-tab-border-color: Specifies border color of the component. Used for "bordered" tabs.
+ * @prop --calcite-tab-text-color: Specifies the icon and text color of the component. 
+ */
+
 :host {
   --calcite-internal-tab-nav-gradient-start-side: left;
   --calcite-internal-tab-nav-gradient-end-side: right;
 
-  --calcite-internal-tab-nav-button-background-color: var(--calcite-color-transparent);
-  --calcite-internal-tab-nav-button-border-color: var(--calcite-color-transparent);
-
   @apply relative flex;
 }
 
 :host([bordered]) {
-  --calcite-internal-tab-nav-button-background-color: var(--calcite-internal-tabs-background-color);
-  --calcite-internal-tab-nav-button-border-color: var(--calcite-internal-tabs-border-color);
+  .container {
+    background-color: var(--calcite-tab-background-color, var(--calcite-color-foreground-1));
+  }
 }
 
 .scale-s {
@@ -135,27 +143,20 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
   @apply absolute bottom-0 top-0;
 
   calcite-button {
-    --calcite-internal-tab-icon-color: var(--calcite-tab-icon-color, var(--calcite-color-text-3));
+    --calcite-button-text-color: var(--calcite-tab-text-color, var(--calcite-color-text-3));
+    --calcite-button-background-color: var(--calcite-color-transparent);
+    --calcite-button-border-color: var(--calcite-tab-border-color, var(--calcite-color-border-1));
 
-    --calcite-button-background-color: var(
-      --calcite-internal-tab-nav-button-background-color,
-      var(--calcite-color-transparent)
-    );
-    --calcite-button-border-color: var(--calcite-internal-tab-nav-button-border-color);
-    --calcite-button-icon-color: var(--calcite-internal-tab-icon-color);
-    --calcite-button-shadow-color: var(--calcite-color-transparent);
     --calcite-offset-invert-focus: 1;
 
     block-size: var(--calcite-container-size-content-fluid);
 
-    &:active,
-    &:hover {
-      --calcite-button-background-color: var(
-        --calcite-internal-tab-background-color-hover,
-        var(--calcite-color-transparent-hover)
-      );
-      --calcite-button-border-color: var(--calcite-internal-tab-nav-button-border-color);
-      --calcite-button-icon-color: var(--calcite-internal-tab-icon-color);
+    &:hover &:focus {
+      --calcite-button-background-color: var(--calcite-color-transparent-hover);
+    }
+
+    &:active {
+      --calcite-button-background-color: var(--calcite-color-transparent-press);
     }
   }
 }
@@ -173,8 +174,9 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
 :host(:not([bordered])) {
   .scroll-button-container--backward,
   .scroll-button-container--forward {
+    // Scroll arrow separators
     &::before {
-      background-color: var(--calcite-internal-tabs-border-color);
+      background-color: var(--calcite-tab-border-color, var(--calcite-color-border-1));
       opacity: $calcite-opacity-50;
       content: "";
       inline-size: var(--calcite-border-width-sm);
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss
index ea1cec9907b..11af03338d5 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.scss
+++ b/packages/calcite-components/src/components/tab-title/tab-title.scss
@@ -1,3 +1,22 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-tab-text-color: Specifies the component's text color.
+ * @prop --calcite-tab-border-color: Specifies the component's border color.
+ * @prop --calcite-tab-background-color: Specifies the component's background color.
+ * @prop --calcite-accent-color: Specifies the component's accent color.
+ * @prop --calcite-accent-color-hover: Specifies the component's accent color when hovered.
+ * @prop --calcite-accent-color-press: Specifies the component's accent color when selected or active.
+ * @prop --calcite-tab-icon-start-color: Specifies the component's start icon color. Fallback to `--calcite-icon-color` or current color.  
+ * @prop --calcite-tab-icon-end-color: Specifies the component's end icon color. Fallback to `--calcite-icon-color` or current color.
+ * @prop --calcite-close-icon-color: Specifies the color of the close icon.
+ * @prop --calcite-close-icon-color-press: Specifies the color of the close icon when interacted with.
+ * @prop --calcite-close-background-color: Specifies the background color of the close icon.
+ * @prop --calcite-close-background-color-press: Specifies the background color of the close icon when interacted with.
+ */
+
 :host {
   @apply block outline-none;
   margin-inline-start: theme("margin.0");
@@ -90,6 +109,7 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inline-size: 100%;
+  background-color: var(--calcite-accent-color, var(--calcite-color-transparent));
 }
 
 .container--bottom .selected-indicator {
@@ -97,105 +117,6 @@
   inset-block-start: 0;
 }
 
-:host([bordered]) .selected-indicator {
-  inset-block-start: 0;
-  inset-block-end: unset;
-  inset-inline-start: -1px;
-  inset-inline-end: 0;
-  inline-size: calc(100% + var(--calcite-spacing-base));
-}
-
-:host([bordered]) .container:not(.container--bottom) {
-  border-block-end: 1px solid transparent;
-}
-
-:host([bordered]:not([selected]):hover) .container:not(.container--bottom) {
-  border-block-end: 1px solid var(--calcite-internal-tabs-border-color);
-}
-
-:host([bordered]:not([selected]):hover:not(:focus)) {
-  .selected-indicator {
-    background-color: var(--calcite-internal-tab-accent-color-hover);
-  }
-  .container:not(.container--bottom) .selected-indicator {
-    box-shadow: inset 0 1px var(--calcite-internal-tabs-border-color);
-  }
-  .container.container--bottom .selected-indicator {
-    box-shadow: inset 0 -1px var(--calcite-internal-tabs-border-color);
-  }
-}
-
-:host([bordered][selected]) .container::after {
-  @apply absolute
-    block
-    w-full
-    h-0.5
-    transition-default;
-  inset-block-end: -1px;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  inline-size: 100%;
-  background: var(--calcite-internal-tabs-background-color);
-  content: "";
-}
-
-:host([bordered][selected]) .container.container--bottom::after {
-  inset-block-start: -1px;
-}
-
-:host([bordered][selected]:hover) .container::after {
-  background: var(--calcite-internal-tab-background-color-hover);
-}
-
-:host([bordered][selected]:focus) .container::after {
-  background: transparent;
-}
-
-:host([bordered]) .container--bottom .selected-indicator {
-  inset-block-start: unset;
-  inset-block-end: 0;
-}
-
-:host(:hover) .selected-indicator {
-  background-color: var(--calcite-internal-tab-accent-color-hover);
-}
-
-:host([selected]) .selected-indicator,
-:host([selected]:hover) .selected-indicator,
-:host(:focus) .selected-indicator,
-:host(:active) .selected-indicator {
-  background-color: var(--calcite-internal-tab-accent-color-selected);
-}
-
-@media (forced-colors: active) {
-  .selected-indicator {
-    background-color: highlight;
-  }
-}
-
-:host([closed]) {
-  @apply hidden;
-}
-
-:host([selected]) .container {
-  @apply border-color-transparent;
-  color: var(--calcite-tab-text-color-selected, var(--calcite-color-text-1));
-}
-
-:host(:focus) .container {
-  @apply focus-inset;
-
-  &:focus-within {
-    @apply focus-base;
-  }
-}
-
-@include disabled() {
-  .container {
-    @apply pointer-events-none opacity-50;
-  }
-}
-
 .calcite-tab-title--icon {
   @apply relative
     m-0
@@ -207,11 +128,11 @@
 }
 
 .icon-start {
-  --calcite-icon-color: var(--calcite-tab-icon-start-color, var(--calcite-tab-icon-color));
+  color: var(--calcite-tab-icon-start-color, var(--calcite-icon-color));
 }
 
 .icon-end {
-  --calcite-icon-color: var(--calcite-tab-icon-end-color, var(--calcite-tab-icon-color));
+  color: var(--calcite-tab-icon-end-color, var(--calcite-icon-color));
 }
 
 .content--has-text {
@@ -240,86 +161,184 @@
   justify-center
   h-full
   self-center
-  text-color-3
   transition-default;
   margin-inline-start: var(--calcite-spacing-sm);
   margin-inline-end: var(--calcite-spacing-px);
   block-size: calc(100% - var(--calcite-spacing-xxs));
+  color: var(--calcite-close-icon-color, var(--calcite-color-text-3));
+  background-color: var(--calcite-close-background-color, var(--calcite-color-transparent));
 
   &:focus {
     @apply focus-normal;
   }
 
   &:focus,
-  &:hover {
-    @apply text-color-1;
-    background-color: var(--calcite-color-foreground-3);
-  }
-
+  &:hover,
   &:active {
-    @apply text-color-1;
-    background-color: var(--calcite-color-foreground-3);
-  }
-
-  & calcite-icon {
-    color: inherit;
+    color: var(--calcite-close-icon-color-press, var(--calcite-color-text-1));
+    background-color: var(--calcite-close-background-color-press, var(--calcite-color-foreground-3));
   }
 }
 
-// compensate for spacing when no hastext and two icons
-:host([icon-start][icon-end]) {
-  .calcite-tab-title--icon:first-child {
-    margin-inline-end: var(--calcite-spacing-sm);
-  }
-}
+:host([bordered]) {
+  .container {
+    border-color: transparent;
+    border-inline-width: var(--calcite-spacing-px);
+    border-inline-style: solid;
+
+    .x-button {
+      & calcite-icon {
+        margin-block-start: var(--calcite-spacing-px);
+      }
+
+      &:focus,
+      &:hover,
+      &:active {
+        box-shadow: 0 2px 0 0 var(--calcite-close-background-color-press, var(--calcite-color-foreground-3));
+      }
+    }
+
+    &.container--bottom {
+      border-block-start-style: solid;
+      border-block-start-width: 1px;
+
+      .selected-indicator {
+        inset-block-start: unset;
+        inset-block-end: 0;
+      }
+
+      .x-button {
+        box-shadow: 0 -2px 0 0 var(--calcite-close-background-color, var(--calcite-color-transparent));
+
+        &:focus,
+        &:hover,
+        &:active {
+          box-shadow: 0 -2px 0 0 var(--calcite-close-background-color-press, var(--calcite-color-foreground-3));
+        }
+
+        calcite-icon {
+          margin-block-end: var(--calcite-spacing-px);
+        }
+      }
+    }
+
+    &:not(.container--bottom) {
+      border-block-end-style: solid;
+      border-block-end-width: 1px;
 
-// bordered styles
-:host([bordered]) .container {
-  &:not(.container--bottom) .x-button {
-    block-size: calc(100% - var(--calcite-spacing-px));
-    margin-block-start: -1px;
+      .x-button {
+        block-size: calc(100% - var(--calcite-spacing-px));
+        margin-block-start: -1px;
+      }
+    }
   }
-  .x-button {
-    & calcite-icon {
-      margin-block-start: var(--calcite-spacing-px);
+
+  .selected-indicator {
+    inset-block-start: 0;
+    inset-block-end: unset;
+    inset-inline-start: -1px;
+    inset-inline-end: 0;
+    inline-size: calc(100% + var(--calcite-spacing-base));
+  }
+
+  &:host([selected]) {
+    .container {
+      border-inline-color: var(--calcite-tab-border-color, var(--calcite-color-border-1));
+
+      &::after {
+        @apply absolute
+          block
+          w-full
+          h-0.5
+          transition-default;
+        inset-block-end: -1px;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        inline-size: 100%;
+        background-color: var(--calcite-tab-background-color, var(--calcite-color-foreground-1));
+        content: "";
+      }
+    }
+
+    &.container--bottom::after {
+      inset-block-start: -1px;
+    }
+
+    &:host(:hover) .container::after {
+      background-color: var(--calcite-tab-background-color, var(--calcite-color-foreground-2));
     }
 
-    &:focus,
-    &:hover,
-    &:active {
-      box-shadow: 0 2px 0 0 var(--calcite-color-foreground-3);
+    &:host(:focus) .container::after {
+      background: transparent;
     }
   }
 
-  &.container--bottom .x-button {
-    box-shadow: 0 -2px 0 0 transparent;
-    & calcite-icon {
-      margin-block-end: var(--calcite-spacing-px);
+  &:host(:not([selected])) {
+    .container .x-button {
+      box-shadow: 0 2px 0 0 transparent;
+    }
+
+    &:host(:hover) {
+      .container:not(.container--bottom) {
+        border-block-end-color: var(--calcite-tab-border-color, var(--calcite-color-border-1));
+      }
+
+      &:host(:not(:focus)) {
+        .selected-indicator {
+          background-color: var(--calcite-tab-accent-color-hover, var(--calcite-color-border-3));
+          box-shadow: inset 0 var(--calcite-internal-tab-shadow-length)
+            var(--calcite-tab-border-color, var(--calcite-color-border-1));
+        }
+        :not(.container--bottom) {
+          --calcite-internal-tab-shadow-length: 1px;
+        }
+        .container--bottom {
+          --calcite-internal-tab-shadow-length: -1px;
+        }
+      }
     }
-    &:focus,
-    &:hover,
-    &:active {
-      box-shadow: 0 -2px 0 0 var(--calcite-color-foreground-3);
+  }
+
+  &:host(:hover) {
+    .container {
+      background-color: var(--calcite-tab-background-color, var(--calcite-color-foreground-2));
     }
   }
 }
 
-:host([bordered]:not([selected])) .container .x-button {
-  box-shadow: 0 2px 0 0 transparent;
+:host(:hover) .selected-indicator {
+  background-color: var(--calcite-accent-color-hover, var(--calcite-color-border-3));
 }
 
-:host([bordered]:hover) {
-  .container {
-    background-color: var(--calcite-internal-tab-background-color-hover);
-  }
+:host([selected]) .selected-indicator,
+:host([selected]:hover) .selected-indicator,
+:host(:focus) .selected-indicator,
+:host(:active) .selected-indicator {
+  background-color: var(--calcite-accent-color-press, var(--calcite-color-brand));
 }
 
-:host([bordered]) .container {
-  border-inline: var(--calcite-spacing-px) solid transparent;
+:host([closed]) {
+  @apply hidden;
+}
+
+:host([selected]) .container {
+  @apply border-color-transparent;
+  color: var(--calcite-tab-text-color, var(--calcite-color-text-1));
 }
 
-:host([selected][bordered]) .container {
-  border-inline-color: var(--calcite-internal-tabs-border-color);
+:host(:focus) .container {
+  @apply focus-inset;
+
+  &:focus-within {
+    @apply focus-base;
+  }
+}
+
+// compensate for spacing when no hastext and two icons
+:host([icon-start][icon-end]) {
+  .calcite-tab-title--icon:first-child {
+    margin-inline-end: var(--calcite-spacing-sm);
+  }
 }
 
 :host([layout="inline"][bordered]),
@@ -363,14 +382,6 @@
     outline-color: highlight;
   }
 
-  :host([bordered]) .container {
-    border-block-end-style: solid;
-  }
-
-  :host([bordered]) .container--bottom {
-    border-block-start-style: solid;
-  }
-
   :host([bordered][selected]) .container {
     border-block-end-style: none;
   }
@@ -383,6 +394,15 @@
     /* in high contrast the tab title outline covers the close button outline without a z-index */
     @apply z-default;
   }
+
+  .selected-indicator {
+    background-color: highlight;
+  }
 }
 
 @include base-component();
+@include disabled() {
+  .container {
+    @apply pointer-events-none opacity-50;
+  }
+}
diff --git a/packages/calcite-components/src/components/tab/tab.scss b/packages/calcite-components/src/components/tab/tab.scss
index 896d840444c..f6b151b675e 100644
--- a/packages/calcite-components/src/components/tab/tab.scss
+++ b/packages/calcite-components/src/components/tab/tab.scss
@@ -3,22 +3,21 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
+ * @prop --calcite-tab-content-space-y: Specifies the vertical space between the component's content in the `default` slot.
  * @prop --calcite-tab-content-block-padding: [Deprecated] Use `--calcite-tab-content-space-y` instead. Specifies the block padding of the component's content in the `default` slot.
  */
 
-:host([selected]) {
-  section,
-  .container {
-    @apply block;
-  }
-}
-
 :host {
   @apply hidden h-full w-full;
 }
 
 :host([selected]) {
   @apply block h-full w-full overflow-auto;
+
+  section,
+  .container {
+    @apply block;
+  }
 }
 
 .content {
diff --git a/packages/calcite-components/src/components/tabs/tabs.scss b/packages/calcite-components/src/components/tabs/tabs.scss
index d844f1ef30f..91be6d38330 100644
--- a/packages/calcite-components/src/components/tabs/tabs.scss
+++ b/packages/calcite-components/src/components/tabs/tabs.scss
@@ -3,39 +3,20 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-tab-accent-color-hover: Specifies the component's accent color when hovered.
- * @prop --calcite-tab-accent-color-selected: Specifies the component's accent color when selected.
- * @prop --calcite-tab-background-color-hover: Specifies the component's background color when hovered.
- * @prop --calcite-tab-background-color: Specifies the component's background color.
- * @prop --calcite-tab-content-space-y: Specifies the block padding of the component's content.
- * @prop --calcite-tab-icon-color: Specifies the component's icon color.
- * @prop --calcite-tab-icon-end-color: Specifies the component's `iconEnd` color. Fallback to `--calcite-tab-icon-color` or current color.
- * @prop --calcite-tab-icon-start-color: Specifies the component's `iconStart` color. Fallback to `--calcite-tab-icon-color` or current color.
- * @prop --calcite-tab-text-color-selected: Specifies the component's text color when selected.
- * @prop --calcite-tab-text-color: Specifies the component's text color.
- * @prop --calcite-tabs-background-color: The background color of the component.
- * @prop --calcite-tabs-border-color: The border color of the component.
+ * @prop --calcite-tab-background-color: The background color of the component.
+ * @prop --calcite-tab-border-color: The border color of the component.
  */
 
 :host {
   @apply flex flex-col;
-
-  --calcite-internal-tabs-border-color: var(--calcite-tabs-border-color, var(--calcite-color-border-1));
-  --calcite-internal-tabs-background-color: var(--calcite-tabs-background-color, var(--calcite-color-foreground-1));
-  --calcite-internal-tab-accent-color-hover: var(--calcite-tab-accent-color-hover, var(--calcite-color-border-3));
-  --calcite-internal-tab-accent-color-selected: var(--calcite-tab-accent-color-selected, var(--calcite-color-brand));
-  --calcite-internal-tab-background-color-hover: var(
-    --calcite-tab-background-color-hover,
-    var(--calcite-color-foreground-2)
-  );
 }
 
 :host([bordered]) {
-  box-shadow: inset 0 1px 0 var(--calcite-internal-tabs-border-color);
-  background-color: var(--calcite-internal-tabs-background-color);
+  box-shadow: inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1));
+  background-color: var(--calcite-tab-background-color, var(--calcite-color-foreground-1));
 
   section {
-    border-color: var(--calcite-internal-tabs-border-color);
+    border-color: var(--calcite-tab-border-color, var(--calcite-color-border-1));
     border-style: solid;
   }
 }
@@ -44,13 +25,13 @@ section {
   @apply border flex flex-grow overflow-hidden;
 
   border-block-start-style: solid;
-  border-block-start-color: var(--calcite-internal-tabs-border-color);
+  border-block-start-color: var(--calcite-tab-border-color, var(--calcite-color-border-1));
 }
 
 :host([bordered][position="bottom"]) {
   box-shadow:
-    inset 0 1px 0 var(--calcite-internal-tabs-border-color),
-    inset 0 -1px 0 var(--calcite-internal-tabs-border-color);
+    inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1)),
+    inset 0 -1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1));
 }
 
 :host([bordered]:not([position="bottom"])) ::slotted(calcite-tab-nav) {
@@ -81,7 +62,7 @@ section {
 
 :host([position="bottom"]:not([bordered])) section {
   border-block-end-style: solid;
-  border-block-end-color: var(--calcite-internal-tabs-border-color);
+  border-block-end-color: var(--calcite-tab-border-color, var(--calcite-color-border-1));
 }
 
 @media (forced-colors: active) {

From c325e483cd83801bda49d2cd46226e0660950273 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Tue, 22 Oct 2024 13:04:22 -0700
Subject: [PATCH 2/2] =?UTF-8?q?docs(tabs):=20update=20=E2=80=9Cthe?=
 =?UTF-8?q?=E2=80=9D=20to=20=E2=80=9Cspecifies=E2=80=9D=20to=20follow=20co?=
 =?UTF-8?q?nventions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/calcite-components/src/components/tabs/tabs.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/tabs/tabs.scss b/packages/calcite-components/src/components/tabs/tabs.scss
index 91be6d38330..d77102151e1 100644
--- a/packages/calcite-components/src/components/tabs/tabs.scss
+++ b/packages/calcite-components/src/components/tabs/tabs.scss
@@ -3,8 +3,8 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-tab-background-color: The background color of the component.
- * @prop --calcite-tab-border-color: The border color of the component.
+ * @prop --calcite-tab-background-color: Specifies background color of the component.
+ * @prop --calcite-tab-border-color: Specifies border color of the component.
  */
 
 :host {