feat(tabs): add component tokens

packages/calcite-components/src/components/tabs/tabs.scss

@@ -1,14 +1,26 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-tabs-background-color: The background color of the component.
+ * @prop --calcite-tabs-border-color: The border color of the component.
+ */
+
 :host {
   @apply flex flex-col;
+
+  --calcite-tabs-background-color: var(--calcite-color-foreground-1);
+  --calcite-tabs-border-color: var(--calcite-color-border-1);
 }
 
 :host([bordered]) {
   box-shadow: inset 0 1px 0 var(--calcite-color-border-1);
-  background-color: var(--calcite-color-foreground-1);
+  background-color: var(--calcite-tabs-background-color);
+}
 
-  section {
-    @apply border-color-1 border border-solid;
-  }
+section {
+  @apply border-color-1 border border-solid;
 }
 
 :host([bordered][position="bottom"]) {
@@ -38,19 +50,21 @@
 }
 
 section {
-  @apply border-t-color-1
-    flex
+  @apply flex
     flex-grow
     overflow-hidden
     border-t;
+
   border-block-start-style: solid;
+  border-block-start-color: var(--calcite-tabs-border-color);
 }
 
 :host([position="bottom"]) section {
-  @apply border-b-color-1
-    flex-col-reverse
+  @apply flex-col-reverse
     border-t-0
     border-b;
+
+  border-block-end-color: var(--calcite-tabs-border-color);
 }
 
 :host([position="bottom"]:not([bordered])) section {

packages/calcite-components/src/components/tabs/tabs.stories.ts

@@ -587,3 +587,24 @@ export const paddingPropOverrideAtElementLevel = (): string => html`
     </calcite-tabs>
   </calcite-tabs>
 `;
+
+export const themed_TestOnly = (): string => html`
+  <calcite-tabs
+    style="
+    --calcite-tabs-background-color: yellow;
+    --calcite-tabs-border-color: green;
+    "
+    bordered
+  >
+    <calcite-tab-nav slot="title-group">
+      <calcite-tab-title tab="tab1">Tab 1 Title</calcite-tab-title>
+      <calcite-tab-title tab="tab2">Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title tab="tab3">Tab 3 Title</calcite-tab-title>
+      <calcite-tab-title tab="tab4" selected>Tab 4 Title</calcite-tab-title>
+    </calcite-tab-nav>
+    <calcite-tab tab="tab1">Tab 1 Content</calcite-tab>
+    <calcite-tab tab="tab2">Tab 2 Content</calcite-tab>
+    <calcite-tab tab="tab3">Tab 3 Content</calcite-tab>
+    <calcite-tab tab="tab4" selected>Tab 4 Content</calcite-tab>
+  </calcite-tabs>
+`;