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

[alisonailea]

Related Issue: #7180

Summary

Tabs

--calcite-tab-background-color: Specifies background color of the component.
--calcite-tab-border-color: Specifies border color of the component.

Tab Title

--calcite-tab-text-color: Specifies the component's text color.
--calcite-tab-border-color: Specifies the component's border color.
--calcite-tab-background-color: Specifies the component's background color.
--calcite-accent-color: Specifies the component's accent color.
--calcite-accent-color-hover: Specifies the component's accent color when hovered.
--calcite-accent-color-press: Specifies the component's accent color when selected or active.
--calcite-tab-icon-start-color: Specifies the component's start icon color. Fallback to --calcite-icon-color or current color.
--calcite-tab-icon-end-color: Specifies the component's end icon color. Fallback to --calcite-icon-color or current color.
--calcite-close-icon-color: Specifies the color of the close icon.
--calcite-close-icon-color-press: Specifies the color of the close icon when interacted with.
--calcite-close-background-color: Specifies the background color of the close icon.
--calcite-close-background-color-press: Specifies the background color of the close icon when interacted with.

Tab

--calcite-tab-content-space-y: Specifies the vertical space between the component's content in the default slot.

Deprecates

--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.

Tab Nav

--calcite-tab-background-color: Specifies background color of the component.
--calcite-tab-border-color: Specifies border color of the component. Used for "bordered" tabs.
--calcite-tab-text-color: Specifies the icon and text color of the component.

[alisonailea]

None of these are used in this component so I don't think these parts should be included in the doc.

[alisonailea]

An example implementation given the above code would go as follows...

calcite-tabs.my-override {
  --calcite-tab-background-color: red;
  --calcite-tab-text-color: white;
  --calcite-tab-border-color: green;
  --calcite-accent-color: transparent;
  --calcite-accent-color-hover: lightblue;
  --calcite-accent-color-press: purple;
  --calcite-icon-color: black;
  --calcite-close-background-color: transparent;
  --calcite-close-background-color-press: var(--calcite-color-transparent-press);
  --calcite-close-icon-color: black;
  --calcite-close-icon-color-press: darkgrey;

  *[selected] {
    --calcite-tab-icon-start-color: grey;
    --calcite-tab-icon-end-color: darkblue;
  }
 
  *[bordered] {
    &:hover {
      --calcite-tab-background-color: darkred;
    }
    &:active {
      --calcite-tab-background-color: white;
       --calcite-tab-text-color: red;
    }
  }
}

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.