feat(carousel): Add public design tokens (#9333)

## Summary
We "hid" the theming tokens when we added Carousel, this makes them
public in the 7180 epic. Tests will follow in a separate PR.

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

@@ -1,68 +1,62 @@
 /**
-  * Local props
-  * These properties are intended for internal component use only. It is not recommended that these properties be overwritten.
-  * These should be made public and documented post-release of token work.
-  *
-  * --calcite-internal-carousel-item-background-color-active: Specifies the background color of the component's slide item while active.
-  * --calcite-internal-carousel-item-background-color-hover: Specifies the background color of the component's slide item while hovered.
-  * --calcite-internal-carousel-item-background-color-selected: Specifies the background color of the component's slide item when selected.
-  * --calcite-internal-carousel-item-background-color: Specifies the background color of the component's slide item.
-  * --calcite-internal-carousel-item-icon-color-hover: Specifies the icon color of the component's slide item while hovered.
-  * --calcite-internal-carousel-item-icon-color-selected: Specifies the icon color of the component's slide item when selected.
-  * --calcite-internal-carousel-item-icon-color: Specifies the icon color of the component's slide item.
-  * --calcite-internal-carousel-control-color-hover: Specifies the icon color of the component's slide slide arrow and autoplay button while hovered.
-  * --calcite-internal-carousel-control-color: Specifies the icon color of the component's slide arrow and autoplay button.
-  * --calcite-internal-carousel-autoplay-progress-background-color: Specifies the background color of the component's progress when `autoplay`.
-  * --calcite-internal-carousel-autoplay-progress-fill-color: Specifies the fill color of the component's progress when `autoplay`.
-  *
-*/
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-carousel-item-background-color-active: Specifies the background color of the component's slide item while active.
+ * @prop --calcite-carousel-item-background-color-hover: Specifies the background color of the component's slide item while hovered.
+ * @prop --calcite-carousel-item-background-color-selected: Specifies the background color of the component's slide item when selected.
+ * @prop --calcite-carousel-item-background-color: Specifies the background color of the component's slide item.
+ * @prop --calcite-carousel-item-icon-color-hover: Specifies the icon color of the component's slide item while hovered.
+ * @prop --calcite-carousel-item-icon-color-selected: Specifies the icon color of the component's slide item when selected.
+ * @prop --calcite-carousel-item-icon-color: Specifies the icon color of the component's slide item.
+ * @prop --calcite-carousel-control-color-hover: Specifies the icon color of the component's slide slide arrow and autoplay button while hovered.
+ * @prop --calcite-carousel-control-color: Specifies the icon color of the component's slide arrow and autoplay button.
+ * @prop --calcite-carousel-autoplay-progress-background-color: Specifies the background color of the component's progress when `autoplay`.
+ * @prop --calcite-carousel-autoplay-progress-fill-color: Specifies the fill color of the component's progress when `autoplay`.
+ *
+ */
 
 :host {
   @apply flex w-full;
-  --calcite-internal-internal-carousel-item-space: 1.5rem;
-  --calcite-internal-internal-carousel-item-space-wide: 3.5rem;
-  --calcite-internal-internal-carousel-item-background-color: var(
-    --calcite-internal-carousel-item-background-color,
+  --calcite-internal-carousel-item-space: 1.5rem;
+  --calcite-internal-carousel-item-space-wide: 3.5rem;
+  --calcite-internal-carousel-item-background-color: var(
+    --calcite-carousel-item-background-color,
     var(--calcite-color-foreground-1)
   );
-  --calcite-internal-internal-carousel-item-background-color-hover: var(
-    --calcite-internal-carousel-item-background-color-hover,
+  --calcite-internal-carousel-item-background-color-hover: var(
+    --calcite-carousel-item-background-color-hover,
     var(--calcite-color-foreground-2)
   );
-  --calcite-internal-internal-carousel-item-background-color-active: var(
-    --calcite-internal-carousel-item-background-color-active,
+  --calcite-internal-carousel-item-background-color-active: var(
+    --calcite-carousel-item-background-color-active,
     var(--calcite-color-foreground-2)
   );
-  --calcite-internal-internal-carousel-item-background-color-selected: var(
-    --calcite-internal-carousel-item-background-color-selected,
+  --calcite-internal-carousel-item-background-color-selected: var(
+    --calcite-carousel-item-background-color-selected,
     var(--calcite-color-foreground-1)
   );
-  --calcite-internal-internal-carousel-item-icon-color-hover: var(
-    --calcite-internal-carousel-item-icon-color-hover,
+  --calcite-internal-carousel-item-icon-color-hover: var(
+    --calcite-carousel-item-icon-color-hover,
     var(--calcite-action-color-transparent-hover)
   );
-  --calcite-internal-internal-carousel-item-icon-color: var(
-    --calcite-internal-carousel-item-icon-color,
-    var(--calcite-color-border-3)
-  );
-  --calcite-internal-internal-carousel-item-icon-color-selected: var(
-    --calcite-internal-carousel-item-icon-color-selected,
+  --calcite-internal-carousel-item-icon-color: var(--calcite-carousel-item-icon-color, var(--calcite-color-border-3));
+  --calcite-internal-carousel-item-icon-color-selected: var(
+    --calcite-carousel-item-icon-color-selected,
     var(--calcite-color-brand)
   );
-  --calcite-internal-internal-carousel-control-color-hover: var(
-    --calcite-internal-carousel-control-color-hover,
-    var(--calcite-internal-carousel-item-icon-color-hover)
-  );
-  --calcite-internal-internal-carousel-control-color: var(
-    --calcite-internal-carousel-item-icon-color,
-    var(--calcite-color-border-input)
+  --calcite-internal-carousel-control-color-hover: var(
+    --calcite-carousel-control-color-hover,
+    var(--calcite-carousel-item-icon-color-hover)
   );
-  --calcite-internal-internal-carousel-autoplay-progress-background-color: var(
-    --calcite-internal-carousel-autoplay-progress-background-color,
+  --calcite-internal-carousel-control-color: var(--calcite-carousel-item-icon-color, var(--calcite-color-border-input));
+  --calcite-internal-carousel-autoplay-progress-background-color: var(
+    --calcite-carousel-autoplay-progress-background-color,
     var(--calcite-color-border-3)
   );
-  --calcite-internal-internal-carousel-autoplay-progress-fill-color: var(
-    --calcite-internal-carousel-autoplay-progress-fill-color,
+  --calcite-internal-carousel-autoplay-progress-fill-color: var(
+    --calcite-carousel-autoplay-progress-fill-color,
     var(--calcite-color-brand)
   );
 }
@@ -100,8 +94,8 @@
 }
 
 .container--edged:not(.container--overlaid) {
-  padding-inline: var(--calcite-internal-internal-carousel-item-space-wide);
-  inline-size: calc(100% - var(--calcite-internal-internal-carousel-item-space-wide) * 2);
+  padding-inline: var(--calcite-internal-carousel-item-space-wide);
+  inline-size: calc(100% - var(--calcite-internal-carousel-item-space-wide) * 2);
 }
 
 .item-container {
@@ -153,17 +147,17 @@ calcite-carousel-item:not([selected]) {
 
 .pagination-item.page-next,
 .pagination-item.page-previous {
-  color: var(--calcite-internal-internal-carousel-control-color);
+  color: var(--calcite-internal-carousel-control-color);
   &:hover {
-    color: var(--calcite-internal-internal-carousel-control-color-hover);
+    color: var(--calcite-internal-carousel-control-color-hover);
   }
 }
 
 .pagination-item.autoplay-control {
   position: relative;
-  color: var(--calcite-internal-internal-carousel-control-color);
-  --calcite-color-brand: var(--calcite-internal-internal-carousel-autoplay-progress-fill-color);
-  --calcite-color-border-3: var(--calcite-internal-internal-carousel-autoplay-progress-background-color);
+  color: var(--calcite-internal-carousel-control-color);
+  --calcite-color-brand: var(--calcite-internal-carousel-autoplay-progress-fill-color);
+  --calcite-color-border-3: var(--calcite-internal-carousel-autoplay-progress-background-color);
 }
 
 .autoplay-progress {
@@ -193,41 +187,41 @@ calcite-carousel-item:not([selected]) {
   display: flex;
   align-content: center;
   justify-content: center;
-  --calcite-color-foreground-1: var(--calcite-internal-internal-carousel-item-background-color);
-  color: var(--calcite-internal-internal-carousel-item-icon-color);
+  --calcite-color-foreground-1: var(--calcite-internal-carousel-item-background-color);
+  color: var(--calcite-internal-carousel-item-icon-color);
   &:hover {
-    background-color: var(--calcite-internal-internal-carousel-item-background-color-hover);
-    color: var(--calcite-internal-internal-carousel-item-icon-color-hover);
+    background-color: var(--calcite-internal-carousel-item-background-color-hover);
+    color: var(--calcite-internal-carousel-item-icon-color-hover);
   }
   &:focus {
-    background-color: var(--calcite-internal-internal-carousel-item-background-color-active);
+    background-color: var(--calcite-internal-carousel-item-background-color-active);
     @apply focus-inset;
   }
   &:active {
-    background-color: var(--calcite-internal-internal-carousel-item-background-color-active);
-    color: var(--calcite-internal-internal-carousel-item-icon-color-hover);
+    background-color: var(--calcite-internal-carousel-item-background-color-active);
+    color: var(--calcite-internal-carousel-item-icon-color-hover);
   }
   & calcite-icon {
     color: inherit;
     pointer-events: none;
   }
   &.pagination-item--selected {
-    --calcite-color-foreground-1: var(--calcite-internal-internal-carousel-item-background-color-selected);
-    --calcite-color-foreground-3: var(--calcite-internal-internal-carousel-item-background-color-selected);
-    color: var(--calcite-internal-internal-carousel-item-icon-color-selected);
+    --calcite-color-foreground-1: var(--calcite-internal-carousel-item-background-color-selected);
+    --calcite-color-foreground-3: var(--calcite-internal-carousel-item-background-color-selected);
+    color: var(--calcite-internal-carousel-item-icon-color-selected);
   }
 }
 
 .container--overlaid .pagination-item {
-  background-color: var(--calcite-internal-internal-carousel-item-background-color);
+  background-color: var(--calcite-internal-carousel-item-background-color);
   &:hover {
-    background-color: var(--calcite-internal-internal-carousel-item-background-color-hover);
+    background-color: var(--calcite-internal-carousel-item-background-color-hover);
   }
   &:focus {
-    background-color: var(--calcite-internal-internal-carousel-item-background-color-active);
+    background-color: var(--calcite-internal-carousel-item-background-color-active);
   }
   &:active {
-    background-color: var(--calcite-internal-internal-carousel-item-background-color-active);
+    background-color: var(--calcite-internal-carousel-item-background-color-active);
   }
 }
 

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

@@ -212,12 +212,12 @@ export const themed_simple = (): string =>
         line-height: 32px;
       }
       calcite-carousel {
-        --calcite-internal-carousel-item-icon-color-hover: green;
-        --calcite-internal-carousel-item-icon-color-selected: blue;
-        --calcite-internal-carousel-item-icon-color-active: orange;
-        --calcite-internal-carousel-item-icon-color: red;
-        --calcite-internal-carousel-autoplay-progress-background-color: purple;
-        --calcite-internal-carousel-autoplay-progress-fill-color: pink;
+        --calcite-carousel-item-icon-color-hover: green;
+        --calcite-carousel-item-icon-color-selected: blue;
+        --calcite-carousel-item-icon-color-active: orange;
+        --calcite-carousel-item-icon-color: red;
+        --calcite-carousel-autoplay-progress-background-color: purple;
+        --calcite-carousel-autoplay-progress-fill-color: pink;
       }
     </style>
     <calcite-carousel autoplay="paused">
@@ -273,16 +273,16 @@ export const themed_carouselFullImageWithOverlay = (): string =>
         line-height: 32px;
       }
       calcite-carousel {
-        --calcite-internal-carousel-item-background-color-active: orange;
-        --calcite-internal-carousel-item-background-color-hover: yellow;
-        --calcite-internal-carousel-item-background-color-selected: red;
-        --calcite-internal-carousel-item-background-color: rgba(20, 180, 200, 0.8);
-        --calcite-internal-carousel-item-icon-color-hover: white;
-        --calcite-internal-carousel-item-icon-color-selected: pink;
-        --calcite-internal-carousel-item-icon-color-active: white;
-        --calcite-internal-carousel-item-icon-color: lightgreen;
-        --calcite-internal-carousel-autoplay-progress-background-color: purple;
-        --calcite-internal-carousel-autoplay-progress-fill-color: pink;
+        --calcite-carousel-item-background-color-active: orange;
+        --calcite-carousel-item-background-color-hover: yellow;
+        --calcite-carousel-item-background-color-selected: red;
+        --calcite-carousel-item-background-color: rgba(20, 180, 200, 0.8);
+        --calcite-carousel-item-icon-color-hover: white;
+        --calcite-carousel-item-icon-color-selected: pink;
+        --calcite-carousel-item-icon-color-active: white;
+        --calcite-carousel-item-icon-color: lightgreen;
+        --calcite-carousel-autoplay-progress-background-color: purple;
+        --calcite-carousel-autoplay-progress-fill-color: pink;
       }
     </style>
     <calcite-carousel control-overlay arrow-type="edge">

packages/calcite-components/src/demos/carousel.html

@@ -66,16 +66,16 @@
       }
 
       .themed {
-        --calcite-internal-carousel-item-background-color-active: orange;
-        --calcite-internal-carousel-item-background-color-hover: yellow;
-        --calcite-internal-carousel-item-background-color-selected: red;
-        --calcite-internal-carousel-item-background-color: rgba(20, 180, 200, 0.8);
-        --calcite-internal-carousel-item-icon-color-hover: white;
-        --calcite-internal-carousel-item-icon-color-selected: pink;
-        --calcite-internal-carousel-item-icon-color-active: white;
-        --calcite-internal-carousel-item-icon-color: lightgreen;
-        --calcite-internal-carousel-autoplay-progress-background-color: purple;
-        --calcite-internal-carousel-autoplay-progress-fill-color: pink;
+        --calcite-carousel-item-background-color-active: orange;
+        --calcite-carousel-item-background-color-hover: yellow;
+        --calcite-carousel-item-background-color-selected: red;
+        --calcite-carousel-item-background-color: rgba(20, 180, 200, 0.8);
+        --calcite-carousel-item-icon-color-hover: white;
+        --calcite-carousel-item-icon-color-selected: pink;
+        --calcite-carousel-item-icon-color-active: white;
+        --calcite-carousel-item-icon-color: lightgreen;
+        --calcite-carousel-autoplay-progress-background-color: purple;
+        --calcite-carousel-autoplay-progress-fill-color: pink;
       }
     </style>
     <script src="_assets/head.js"></script>