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

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

@@ -106,50 +106,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)",
+  $padding: "0",
+  $color: "var(--calcite-close-icon-color, var(--calcite-color-text-1))",
+  $background-color: "var(--calcite-close-background-color, var(--calcite-color-transparent))",
+  $background-color-hover: "var(--calcite-close-background-color-hover, var(--calcite-color-transparent-hover))",
+  $background-color-press: "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;
-
-    border-radius: 50%;
-    border-color: transparent;
-    background-color: var(--calcite-color-foreground-2);
+    @apply transition-default;
+    border-style: none;
+    cursor: pointer;
+    outline-color: transparent;
+    align-items: center;
+    margin: 0;
+    background-color: #{$background-color};
+    -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: #{$background-color-hover};
+    }
+    &:focus {
+      @apply focus-inset;
     }
 
     &:active {
-      @apply border-solid;
-      border-color: theme("borderColor.color-brand");
+      background-color: #{$background-color-press};
     }
 
-    & calcite-icon {
+    calcite-icon {
       color: inherit;
     }
   }
+
+  .x-button--round {
+    border-radius: 9999px;
+  }
 }
 
 @mixin close-button(

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

@@ -509,14 +509,11 @@ describe("calcite-button", () => {
         Layers
       </calcite-button>
     `;
-    let page;
-    let buttonEl;
-    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 {
@@ -530,31 +527,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");
+        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");
+        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 {
@@ -563,10 +560,10 @@ describe("calcite-button", () => {
         </style>
         <div>${buttonSnippet}</div>`,
       });
-      buttonEl = await page.find("calcite-button >>> button");
+      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(overrideStyle);
     });
   });