feat(tabs, tab-nav, tab-title, tab): add component tokens

packages/calcite-components/.stylelintrc.cjs

@@ -1,7 +1,13 @@
 // @ts-check
 
 // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT
-const customFunctions = [];
+const customFunctions = [
+  "get-trailing-text-input-padding",
+  "medium-modular-scale",
+  "modular-scale",
+  "scale-duration",
+  "small-modular-scale"
+];
 // ⚠️ END OF AUTO-GENERATED CODE
 
 const scssPatternRules = [

packages/calcite-components/src/assets/styles/includes.scss

@@ -107,50 +107,53 @@
   }
 }
 
-@mixin x-button() {
-  :host([scale="s"]) {
-    .x-button {
-      inline-size: theme("spacing.4");
-      block-size: theme("spacing.4");
-    }
-  }
-
-  :host([scale="m"]) {
-    .x-button {
-      inline-size: theme("spacing.6");
-      block-size: theme("spacing.6");
-    }
-  }
-
-  :host([scale="l"]) {
-    .x-button {
-      inline-size: theme("spacing.8");
-      block-size: theme("spacing.8");
-    }
-  }
-
+@mixin x-button(
+  $size: "var(--calcite-internal-close-size, 1.5rem /* 24px */)",
+  $padding: "0",
+  $color: "var(--calcite-close-icon-color, var(--calcite-color-text-1))",
+  $backgroundColor: "var(--calcite-close-background-color, var(--calcite-color-transparent))",
+  $backgroundColorHover: "var(--calcite-close-background-color-hover, var(--calcite-color-transparent-hover))",
+  $backgroundColorPress: "var(--calcite-close-background-color-press, var(--calcite-color-transparent-press))"
+) {
   .x-button {
-    @apply appearance-none bg-transparent border-2 content-center cursor-pointer flex focus-base items-center justify-center m-0 self-center text-color-3 transition-default;
+    @apply border-none
+    cursor-pointer
+    focus-base
+    items-center
+    m-0
+    transition-default;
 
-    border-radius: 50%;
-    border-color: transparent;
-    background-color: var(--calcite-color-foreground-2);
+    background-color: #{$backgroundColor};
+    -webkit-appearance: none;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    color: #{$color};
+    block-size: #{$size};
+    inline-size: #{$size};
+    min-block-size: #{$size};
+    min-inline-size: #{$size};
+    padding: #{$padding};
 
-    &:active,
-    &:hover {
-      @apply text-color-1;
-      background-color: var(--calcite-color-foreground-3);
+    &:hover,
+    &:focus {
+      background-color: #{$backgroundColorHover};
+    }
+    &:focus {
+      @apply focus-inset;
     }
-
     &:active {
-      @apply border-solid;
-      border-color: theme("borderColor.color-brand");
+      background-color: #{$backgroundColorPress};
     }
 
-    & calcite-icon {
+    calcite-icon {
       color: inherit;
     }
   }
+
+  .x-button--round {
+    border-radius: 9999px;
+  }
 }
 
 @mixin close-button(
@@ -164,7 +167,7 @@
       focus-base
       items-center
       m-0
-      rounded-half 
+      rounded-half
       transition-default;
 
     background-color: var(--calcite-close-background-color, var(--calcite-color-transparent));

packages/calcite-components/src/components.d.ts

@@ -4568,6 +4568,9 @@ export namespace Components {
          */
         "contentBehind": boolean;
     }
+    /**
+     * @deprecated Use the `calcite-shell-panel` component instead.
+     */
     interface CalciteShellCenterRow {
         /**
           * When `true`, the content area displays like a floating panel.
@@ -7553,6 +7556,9 @@ declare global {
         prototype: HTMLCalciteShellElement;
         new (): HTMLCalciteShellElement;
     };
+    /**
+     * @deprecated Use the `calcite-shell-panel` component instead.
+     */
     interface HTMLCalciteShellCenterRowElement extends Components.CalciteShellCenterRow, HTMLStencilElement {
     }
     var HTMLCalciteShellCenterRowElement: {
@@ -12764,6 +12770,9 @@ declare namespace LocalJSX {
          */
         "contentBehind"?: boolean;
     }
+    /**
+     * @deprecated Use the `calcite-shell-panel` component instead.
+     */
     interface CalciteShellCenterRow {
         /**
           * When `true`, the content area displays like a floating panel.
@@ -14428,6 +14437,9 @@ declare module "@stencil/core" {
             "calcite-select": LocalJSX.CalciteSelect & JSXBase.HTMLAttributes<HTMLCalciteSelectElement>;
             "calcite-sheet": LocalJSX.CalciteSheet & JSXBase.HTMLAttributes<HTMLCalciteSheetElement>;
             "calcite-shell": LocalJSX.CalciteShell & JSXBase.HTMLAttributes<HTMLCalciteShellElement>;
+            /**
+             * @deprecated Use the `calcite-shell-panel` component instead.
+             */
             "calcite-shell-center-row": LocalJSX.CalciteShellCenterRow & JSXBase.HTMLAttributes<HTMLCalciteShellCenterRowElement>;
             "calcite-shell-panel": LocalJSX.CalciteShellPanel & JSXBase.HTMLAttributes<HTMLCalciteShellPanelElement>;
             "calcite-slider": LocalJSX.CalciteSlider & JSXBase.HTMLAttributes<HTMLCalciteSliderElement>;

packages/calcite-components/src/components/button/button.e2e.ts

@@ -507,15 +507,11 @@ describe("calcite-button", () => {
         Layers
       </calcite-button>
     `;
-    let page;
-    let buttonEl;
-    let buttonFocusStyle;
-    let buttonHoverStyle;
 
     it("should have defined CSS custom properties", async () => {
-      page = await newE2EPage({ html: buttonSnippet });
+      const page = await newE2EPage({ html: buttonSnippet });
       const buttonStyles = await page.evaluate(() => {
-        buttonEl = document.querySelector("calcite-button");
+        const buttonEl = document.querySelector("calcite-button");
         buttonEl.style.setProperty("--calcite-color-transparent-hover", "rgba(34, 23, 200, 0.4)");
         buttonEl.style.setProperty("--calcite-color-transparent-press", "rgba(1, 20, 44, 0.1");
         return {
@@ -529,41 +525,31 @@ describe("calcite-button", () => {
 
     describe("when mode attribute is not provided", () => {
       it("should render button pseudo classes with default values tied to light mode", async () => {
-        page = await newE2EPage({ html: buttonSnippet });
-        buttonEl = await page.find("calcite-button >>> button");
-        await buttonEl.focus();
-        await page.waitForChanges();
-        buttonFocusStyle = await buttonEl.getComputedStyle();
-        expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual("rgba(0, 0, 0, 0.04)");
-
+        const page = await newE2EPage({ html: buttonSnippet });
+        const buttonEl = await page.find("calcite-button >>> button");
         await buttonEl.hover();
         await page.waitForChanges();
-        buttonHoverStyle = await buttonEl.getComputedStyle();
+        const buttonHoverStyle = await buttonEl.getComputedStyle();
         expect(buttonHoverStyle.getPropertyValue("background-color")).toEqual("rgba(0, 0, 0, 0.04)");
       });
     });
 
     describe("when mode attribute is dark", () => {
       it("should render button pseudo classes with value tied to dark mode", async () => {
-        page = await newE2EPage({
+        const page = await newE2EPage({
           html: `<div class="calcite-mode-dark">${buttonSnippet}</div>`,
         });
-        buttonEl = await page.find("calcite-button >>> button");
-        await buttonEl.focus();
-        await page.waitForChanges();
-        buttonFocusStyle = await buttonEl.getComputedStyle();
-        expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.04)");
-
+        const buttonEl = await page.find("calcite-button >>> button");
         await buttonEl.hover();
         await page.waitForChanges();
-        buttonHoverStyle = await buttonEl.getComputedStyle();
+        const buttonHoverStyle = await buttonEl.getComputedStyle();
         expect(buttonHoverStyle.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.04)");
       });
     });
 
     it("should allow the CSS custom property to be overridden", async () => {
       const overrideStyle = "rgba(255, 255, 0, 0.9)";
-      page = await newE2EPage({
+      const page = await newE2EPage({
         html: `
         <style>
           :root {
@@ -572,16 +558,11 @@ describe("calcite-button", () => {
         </style>
         <div>${buttonSnippet}</div>`,
       });
-      buttonEl = await page.find("calcite-button >>> button");
-      await buttonEl.focus();
-      await page.waitForChanges();
-      buttonFocusStyle = await buttonEl.getComputedStyle();
-      expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual(overrideStyle);
-
+      const buttonEl = await page.find("calcite-button >>> button");
       await buttonEl.hover();
       await page.waitForChanges();
-      buttonHoverStyle = await buttonEl.getComputedStyle();
-      expect(buttonHoverStyle.getPropertyValue("background-color")).toEqual(overrideStyle);
+      const buttonFocusStyle = await buttonEl.getComputedStyle();
+      expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual(overrideStyle);
     });
   });