feat(tip-manager): add component tokens

packages/calcite-components/src/components/tip-group/tip-group.scss

@@ -11,4 +11,8 @@
   max-inline-size: var(--calcite-tip-max-width);
 }
 
+calcite-tip {
+  //TODO: sub-component tokens
+}
+
 @include base-component();

packages/calcite-components/src/components/tip-manager/tip-manager.scss

@@ -1,31 +1,36 @@
+@import "../../assets/styles/header";
+
 /**
- * CSS Custom Properties
- *
- * These properties can be overridden using the component's tag as selector.
- *
- * @prop --calcite-tip-manager-action-background-color: defines the background color of an action sub-component inside the component.
- * @prop --calcite-tip-manager-action-text-color: defines the text color of an action sub-component inside the component.
- * @prop --calcite-tip-manager-action-background-color-hover: defines the background color of an action sub-component when hovered or focused inside the component.
- * @prop --calcite-tip-manager-action-text-color-hover: defines the text color of an action sub-component when hovered or focused inside the component.
- * @prop --calcite-tip-manager-action-background-color-active: defines the background color of an action sub-component when active inside the component.
- * @prop --calcite-tip-manager-action-text-color-active: defines the text color of an action sub-component when active inside the component.
- * @prop --calcite-tip-manager-height: The maximum height of the component.
- * @prop --calcite-tip-max-width: The maximum width of a slotted `calcite-tip` within the component.
- *
- */
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-tip-max-width: [Deprecated] in favor of setting `max-width` on tips directly - Specifies the maximum width of a slotted `calcite-tip` within the component.
+* @prop --calcite-tip-manager-height: [Deprecated] use `--calcite-tip-max-height instead` - Specifies the maximum height of a slotted `calcite-tip` within the component.
+* @prop --calcite-tip-manager-background-color: The background color of the component.
+* @prop --calcite-tip-manager-heading-text-color: The heading text color of the component.
+* @prop --calcite-tip-manager-text-color: The text color of the component.
+* @prop --calcite-tip-manager-border-color: The border color of the component.
+*
+* @prop --calcite-tip-manager-action-background-color: defines the background color of an action sub-component inside the component.
+* @prop --calcite-tip-manager-action-text-color: defines the text color of an action sub-component inside the component.
+* @prop --calcite-tip-manager-action-background-color-hover: defines the background color of an action sub-component when hovered or focused inside the component.
+* @prop --calcite-tip-manager-action-text-color-hover: defines the text color of an action sub-component when hovered or focused inside the component.
+* @prop --calcite-tip-manager-action-background-color-active: defines the background color of an action sub-component when active inside the component.
+* @prop --calcite-tip-manager-action-text-color-active: defines the text color of an action sub-component when active inside the component.
+*/
 
 :host {
-  @apply bg-foreground-1
-  text-color-2
-  text-n1h
+  @apply text-n1h
   box-border
   block;
 
   * {
     @apply box-border;
   }
 
-  --calcite-tip-manager-height: 19vh;
+  background-color: var(--calcite-tip-manager-background-color, var(--calcite-color-foreground-1));
+  color: var(--calcite-tip-manager-text-color, var(--calcite-color-text-2));
 }
 
 :host([closed]) {
@@ -35,20 +40,21 @@
 @include header();
 
 .header {
-  @apply border-color-3
-    border-0
+  @apply border-0
     border-b
     border-solid
     py-0;
 
   padding-inline-end: theme("padding.0");
   padding-inline-start: theme("padding.4");
+  border-color: var(--calcite-tip-manager-border-color, var(--calcite-color-border-3));
 
   .heading {
-    @apply text-color-1
-      text-1h
+    @apply text-1h
       p-0
       font-bold;
+
+    color: var(--calcite-tip-manager-heading-text-color, var(--calcite-color-text-1));
   }
 }
 
@@ -72,15 +78,14 @@
     p-4;
   animation-name: none;
   animation-duration: var(--calcite-animation-timing);
-  block-size: var(--calcite-tip-manager-height);
+  block-size: var(--calcite-tip-max-height, 19vh);
   &:focus {
     @apply focus-outset;
   }
 }
 
 ::slotted(calcite-tip) {
   @apply m-0 border-none;
-  max-inline-size: var(--calcite-tip-max-width);
 }
 
 .tip-container--advancing {

packages/calcite-components/src/components/tip-manager/tip-manager.stories.ts

@@ -147,3 +147,31 @@ export const bosnianLocale_TestOnly = (): string =>
   html`<calcite-tip-manager heading-level="1" lang="bs">
     <calcite-tip id="one" heading="test"><p>no pre-selected attribute</p></calcite-tip>
   </calcite-tip-manager>`;
+
+export const themed_TestOnly = (): string => html`
+  <calcite-tip-manager
+    style="
+      --calcite-tip-max-height: 200px;
+      --calcite-tip-manager-background-color: orange;
+      --calcite-tip-manager-text-color: red;
+      --calcite-tip-manager-border-color: purple;
+      "
+  >
+    <calcite-tip-group group-title="Astronomy">
+      <calcite-tip heading="The Red Rocks and Blue Water">
+        <img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
+        <p>
+          This tip is how a tip should really look. It has a landscape or square image and a small amount of text
+          content. This paragraph is in an "info" slot.
+        </p>
+        <a href="http://www.esri.com">This is the "link" slot.</a>
+      </calcite-tip>
+      <calcite-tip heading="The Long Trees">
+        <img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
+        <p>This tip has an image that is a pretty tall. And the text will run out before the end of the image.</p>
+        <p>In astronomy, the terms object and body are often used interchangeably.</p>
+        <a href="http://www.esri.com">View Esri</a>
+      </calcite-tip>
+    </calcite-tip-group>
+  </calcite-tip-manager>
+`;